<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body{
background: black;
min-height: 100vh;
min-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.hover{
height: 4rem;
border-radius: 5px;
width: 10rem;
font-size: 2rem;
border: none;
color: black;
position: relative;
transition: transform .7s ease-in;
}
.hover:before{
content: '';
position: absolute;
height: 6%;
width: 6%;
background: black;
top: -3px;
right: 10px;
border: 2px solid white;
transform: width;
transition: transform .7s ease-in;
}
.hover:after{
content: '';
position: absolute;
height: 6%;
width: 6%;
background: black;
bottom: -3px;
left: 10px;
border: 2px solid white;
transition: transform .7s ease-in;
}
.hover:hover:after{
transform: translateX(125px);
border: 2px solid green;
}
.hover:hover{
background: green;
box-shadow: 0 0 63px 19px green;
}
.hover:hover:before{
border: 2px solid green;
transform:translateX(-125px);
}
</style>
</head>
<body>
<div class="main">
<button type="submit" class="hover">Subscribe</button>
</div>
</body>
</html>
Comments
Post a Comment