In this blog,
We are going how to create custom animated submit button.
Step-1: Create Html Code in the index.html file.
<body>
<div class="btn-cont">
<button class="btn"><span>Submit</span><img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" height="62" width="62"></button>
</div>
</body>
Step-2: Add CSS Code in the <style>…</style> on index.html file.
<style>
@-webkit-keyframes extend {
0% {
width: 600px;
height: 200px;
border-radius: 100px;
} 10% {
width: 610px;
height: 210px;
background: #fff;
margin-left: - 5px;
margin-top: - 5px;
} 20% {
width: 600px;
height: 200px;
background: #6fb07f;
margin-left: 0px;
margin-top: 0px;
} 100% {
width: 200px;
height: 200px;
border-radius: 100px;
margin-left: 190px;
background: #6fb07f;
}
}
@keyframes extend {
0% {
width: 600px;
height: 200px;
border-radius: 100px;
} 10% {
width: 610px;
height: 210px;
background: #fff;
margin-left: - 5px;
margin-top: - 5px;
} 20% {
width: 600px;
height: 200px;
background: #6fb07f;
margin-left: 0px;
margin-top: 0px;
} 100% {
width: 200px;
height: 200px;
border-radius: 100px;
margin-left: 190px;
background: #6fb07f;
}
}
@-webkit-keyframes disappear {
0% {
opacity: 1;
} 20% {
color: #fff;
} 100% {
opacity: 0;
}
}
@keyframes disappear {
0% {
opacity: 1;
} 20% {
color: #fff;
} 100% {
opacity: 0;
}
}
@-webkit-keyframes appear {
0% {
opacity: 0;
} 70% {
opacity: 0;
} 100% {
opacity: 1;
}
}
@keyframes appear {
0% {
opacity: 0;
} 70% {
opacity: 0;
} 100% {
opacity: 1;
}
}
html {
background: #fff
}
input, button, submit {
border: none
}
.btn-cont {
position: absolute;
width: 610px;
height: 10px;
left: 50%;
top: 50%;
margin: -100px 0 0 -300px
}
button {
border-width: 1px;
width: 600px;
height: 200px;
border-radius: 100px;
background: #fff;
position: absolute;
border: 5px solid #000000
}
button > span {
font-size: 48px;
color: #000;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0
}
button:focus {
-webkit-animation: extend 1s ease-in-out;
-ms-animation: extend 1s ease-in-out;
animation: extend 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
button:focus > span {
-webkit-animation: disappear 1s ease-in-out;
-ms-animation: disappear 1s ease-in-out;
animation: disappear 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
button:focus > img {
-webkit-animation: appear 1s ease-in-out;
-ms-animation: appear 1s ease-in-out;
animation: appear 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
</style>
Review the below video.
