HTML
<body>
<a class="btn">
<span>
<span>
<span>Hover Me</span>
</span>
</span>
</a>
</body>
<a class="btn">
<span>
<span>
<span>Hover Me</span>
</span>
</span>
</a>
</body>
CSS
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
font-family: sans-serif;
background-color: #f5f5f5;
}
.btn{
font-size: 30px;
text-decoration: none;
position: relative;
padding: 8px 15px;
color: #252525
}
.btn:before, .btn:after{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid #252525;
transition: 0.3s ease-in;
}
.btn:hover:before, .btn:hover:after{
transition: 0.3s ease-out;
}
.btn:hover:before{
transform: translate3d(-3px, 3px, 0);
}
.btn:hover:after{
transform: translate3d(3px, -3px, 0);
}
0 comments:
Post a Comment