Gradient Button Hover Effects Html CSS
[#gradient #html #button]
Description:
[in this tutorial we learn GRADIENT BUTTON HOVER HTML CSS]
HTML
<button class="btn btn-1">BUTTON</button>
CSS
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
div{
position: absolute;
background-color: white;
padding: 10px 50px 50px;
width: 250px;
height: 250px;
text-align: center;
font-family: sans-serif;
border-radius: 25px;
}
div::before{
content: "";
position: absolute;
width: 270px;
height: 270px;
background-color: gray;
margin: 10px -140px;
border-radius: 100px;
box-shadow: 70px 0 150px 40px orangered;
z-index: -1;
animation: animate 7s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}