Creative pure CSS button with animation
- Last updated: Nov 3, 2023
- Views: 111
- Author: Admin
Hello colleagues.
In today's article, I will show you how you can create a creative button with animation in pure html and css without using javascript.
HTML Code:
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
BUTTON
</a>
</body>
CSS Code:
body {
background-color: #EDF9FF;
padding: 0;
margin: 0;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #4589B0;
padding: 35px 50px;
font-size: 50px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 20px #1D628B;
overflow: hidden;
}
a span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #BFE6EC, #1D628B);
animation: span_animate1 1s linear infinite;
}
@keyframes span_animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
a span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #BFE6EC, #1D628B);
animation: span_animate2 1s linear infinite;
}
@keyframes span_animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
a span:nth-child(3) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, #BFE6EC, #1D628B);
animation: span_animate3 1s linear infinite;
}
@keyframes span_animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
a span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #BFE6EC, #1D628B);
animation: span_animate4 1s linear infinite;
}
@keyframes span_animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
Thank you all, I hope my article was of some help to you.
