Creative SVG STROKE Animation button with CSS



Buttons are commonly used in web pages for certain purposes. Some other websites uses creative buttons using svg stroke animations. This animations use @keyframes to apply the animation or to display the animation by declaring them in percentage. Here I used zero percentage and hundred percentage as the animation percentage. So they do animations on that particular percentage.

There are different similar properties related to the SVG. I used some of the svg properties here like stroke-dasharray, offset ,sroke etc. You can also apply this styles during the cursor and entering some specific divisions or certain tags. Here are used a property value infinite to do the animation infinite number of times. I also delayed the svg animation time delay for some seconds so I can control the speed of the animation.

The propety stroke is used to give the colour of of that particular animation. So you think that why there is a rectangle box outside the button icon. Here is the answer. I also set a rectangle using the attribute r e c t.  That is why there is a rectangle box outside the the button.

Here is a live preview for the rectangle button using the svg stroke animations.

Live Preview:







How is my svg animation button using the stroke property in CSS. See that the rectangle I created here is transparent and only shows borders during different intervals and have a a particular colour for that border. I set two lines for the borders for that animation. You can also create more than one or two line or as much as you can. Do you know how is that ? You can use the property stroke-dasharray to set the height of the line so that the increment in the height of the line I can control the number of lines. I think that it two lines are better for attractive buttons.

Have your wondered about the a tag specified here does not show any underline the text like button that is declared here, there is no underline for the button this is because I apply the property text decoration having a value none to remove the underline of the a tag value. 


Code:

<html>
<head>
<title>creative code by cspsyco</title>
<style>
#a
{
text-align:center;
position:relative;
padding:15px 30px;
color:#2196f3;
letter-spacing:2px;
text-decoration:none;
transition:0.5s;
font-size:50px;
}
#a svg,a svg rect
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
fill:transparent;
}

#a svg rect
{
stroke-width:5;
stroke:#2196f3;
stroke-dasharray:210;
animation:animate 1s linear infinite;
}
@keyframes animate
{
0%
{
stroke-dashoffset:400;

}


100%
{
stroke-dashoffset:0;
}
}


</style>

</head>
<body>


<a href=# id=a><svg><rect></rect></svg>
BUTTON</a>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Introducing Cloudflare Pages ⚡

Image
https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user. You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note: This pages are only for front end developers, it didn't have a database and did not support php.
Read more