How to Create a Codepen animated Button with CSS
In this post we will give you information about How to Create a Codepen animated Button with CSS. Hear we will give you detail about How to Create a Codepen animated Button with CSSAnd how to use it also give you demo for it if it is necessary.
we are going to learn about creating a Codepen animated button with css.
Note: This is my third project from the #15daysofcss challenge.
Codepen Demo
Here is the demo for the Codepen animated button.
Getting started
First, let’s add the HTML markup.
<a href="https://onlinecode.org" target="_blank" > <span>Start Coding</span></a>
In the above code, we have an anchor tag <a> with a class animated-button and a span tag.
The CSS styles
In the below code, we have used the linear-gradient() function to apply the 5 different colors to the border of our button.
.animated-button{ font-size: 1rem; font-weight: 400; text-decoration:none; color: #ffff; cursor: pointer; background-image: linear-gradient(164deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange); border-radius: 3px; padding:14px 3px; /* it helps to increase border width*/}.animated-button span{ background: black; color: #ffff; padding:11px 30px; /* it helps to increase button width and height*/ height:100%;}.animated-button:hover{ animation: bordermove .7s linear infinite}The Animation
Now, we need to animate the border whenever a user hovers on the button.
To do that, we need to change the linear-gradient colors at different percentages.
@keyframes bordermove{ 0%{ background-image: linear-gradient(114deg,#c1b562,#b1b1ea,#bb46a7,#b4b783,orange); } 25%{ background-image: linear-gradient(124deg,orange,#b1b1ea,#c1b562,#b4b783,#bb46a7); } 50%{ background-image: linear-gradient(134deg,#b4b783,#bb46a7,orange,#c1b562,#b1b1ea); } 75%{ background-image: linear-gradient(144deg,#b4b783,#b1b1ea,orange,#bb46a7,#c1b562); } 100%{ background-image: linear-gradient(114deg,#c1b562,#b4b783,#b1b1ea,orange,#bb46a7); }}We have used the same five colors in the 0% to 100% but each level we have changed the position of the colors.
I hope you enjoyed ✓ and learned something new.
If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.
Accessibility
If you want a button element with a link tag and at the same time to be accessible with tabs you can use the below HTML markup.
<button > <a href="https://onlinecode.org" target="_blank" tab-index="-1"> <span>Start Coding</span> </a></button>
Hope this code and post will helped you for implement How to Create a Codepen animated Button with CSS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs