Glass Button hover animation effects using CSS
Welcome friends,
In this article I have made a attractive ‘Glass Button hover
animation effects’ usint only HTML and CSS.
HTML and CSS code for this effects are given below. It is also
explained.
CODE explanation
In HTML:-
In html code
I have used one ‘<a></a>’ tag for giving link to Button and four ‘<span></span>’
tags for Button border.
In CSS:-
1. Background design
2. Glass Button design
3. Snake border design
4. Border animation effect on hover
Source code for this effect is given
below:-
HTML code
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="file:///C:/Users/Education/Desktop/css_glass_button_hover_animation_effectseffect.css">
<title>CSS
glass Button hover Animation Effects</title>
</head>
<body>
<a
href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
|
CSS code
/*Background_desigh*/
body
{
margin:0;
padding:
0;
height:
100vh;
display:
flex;
align-items:
center;
justify-content:
center;
background:
linear-gradient(-30deg,#ff905d 0%,#ff90c6 50%,#75e3c5 50%,#63ffb4 100%);
}
/*Glass_Button_design*/
a
{
text-decoration:
none;
position:
relative;
text-transform:
uppercase;
font-family:
sans-serif;
letter-spacing:
4px;
padding:
25px 50px;
font-size:
2em;
overflow:
hidden;
background:
rgba(255,255,255,.1);
box-shadow:
0 3px 5px rgba(0,0,0,.5);
}
/*Snake_border_style*/
a span
{
position:
absolute;
transition:
1s;
}
a span:nth-child(1)
{
left:
0;
top:
0;
width:
0;
height:
1.5px;
background:
#fff;
}
a:hover span:nth-child(1)
{
width:
100%;
transform:
translate(100%);
}
a span:nth-child(2)
{
right:
0;
bottom:
0;
width:
1.5px;
height:
0;
background:
#fff;
}
a:hover span:nth-child(2)
{
height:
100%;
transform:
translateY(-100%);
}
a span:nth-child(3)
{
right:
0;
bottom:
0;
width:
0;
height:
1.5px;
background:
#fff;
}
a:hover span:nth-child(3)
{
width:
100%;
transform:
translate(-100%);
}
a span:nth-child(4)
{
left:
0;
top:
0;
width:
1.5px;
height:
0;
background:
#fff;
}
a:hover span:nth-child(4)
{
height:
100%;
transform:
translateY(100%);
}
|
0 Comments