HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>CSS
Button hover awesome effects</title>
</head>
<body>
<a
href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
|
CSS code:-
/*Background_design*/
body
{
margin:0;
padding: 0;
display: flex;
min-height:
100vh;
align-items:
center;
justify-content:
center;
background:
#d96579;
}
/*Button_design*/
a
{
position:
relative;
text-decoration:
none;
padding: 25px
50px;
background:
#ff2680;
font-weight:
bold;
border-top-left-radius:
20px;
border-bottom-right-radius:
20px;
text-transform:
uppercase;
transition: .5s;
font-family:
sans-serif;
overflow:
hidden;
box-shadow: 0
7px 8px rgba(0,0,0,.3);
}
a:hover
{
box-shadow: 0
3px 5px rgba(0,0,0,.6);
}
/*Border_design*/
a span
{
position:
absolute;
transition: 1s;
}
a span:nth-child(1)
{
left: 0;
top: 0;
width: 0;
height: 1px;
background:#88ff2e;
}
a:hover span:nth-child(1)
{
width: 80%;
transform:translate(100%);
}
a span:nth-child(2)
{
right: 0;
bottom: 0;
width: 0;
height: 1px;
background:#88ff2e;
}
a:hover span:nth-child(2)
{
width: 80%;
transform:translate(-100%);
}
a span:nth-child(3)
{
right: 0;
bottom: 0;
width: 1px;
height: 0;
background:#88ff2e;
}
a:hover span:nth-child(3)
{
height: 100%;
transform:translateY(-60%);
}
a span:nth-child(4)
{
left: 0;
top: 0;
width: 1px;
height: 0;
background:#88ff2e;
}
a:hover span:nth-child(4)
{
height: 80%;
transform:translateY(60%);
}
|
0 Comments