It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 9 March 2021
Websites often use different buttons to enter different pages and sections of them, and the more beautiful and attractive these buttons are, the better. Most of the audience's attention is drawn to the dynamic sections of a web page. Therefore, the use of animation in buttons, such as the following code, makes the website more beautiful. In the following code, the background of the button animates with a rainbow style on mouse hover.
<!-- this script is provided by http://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
section {
position: relative;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #78ddff;
}
#atag {
position: relative;
display: inline-block;
padding: 15px 30px;
text-transform: uppercase;
border: 2.1px solid #322;
color: #111;
text-decoration: none;
font-weight: 600;
font-size: 20px;
background-image: linear-gradient( 225deg, rgba(245, 33, 255, 1) 0%, rgba(64, 35, 255, 1) 16%, rgba(37, 254, 255, 1) 32%, rgba(54, 255, 39, 1) 47%, rgba(255, 252, 41, 1) 66%, rgba(255, 156, 43, 1) 84%, rgba(255, 46, 46, 1) 100% );
transition: 1s;
background-repeat: no-repeat;
}
#atag:before {
content: "";
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% - 12px);
background: #fff;
transition: 0.5s ease-in-out;
transform: scaleY(1);
transition-delay: 0.5s;
}
#atag:hover:before {
transform: scaleY(0);
}
#atag:after {
content: "";
position: absolute;
left: 6px;
top: -2px;
height: calc(100% + 4px);
width: calc(100% - 12px);
background: #fff;
transition: 0.5s ease-in-out;
transform: scaleX(1);
}
#atag:hover:after {
transform: scaleX(0);
}
#atag:hover {
color: #fff;
transition: 1s;
}
#atag span {
position: relative;
z-index: 3;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
<section>
<a href="#" id="atag">
<span>
Button
</span>
</a>
</section>
<a target='_blank' href='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!