ANIMETION HOVER EFFECT BUTTON CODE
<html>
<head>
<style>
body {
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
font-family: "Josefin Slab";
height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 1vw auto;
position: relative;
text-align: center;
width: 94vw;
}
.product {
flex: auto;
font-size: 1.5rem;
margin: 0 1vw calc(1vw + 50px) 1vw;
min-width: calc(33% - 2vw);
position: relative;
}
.product:before {content: "";
float: left;
padding-top: 100%;
}
.content {
background: white;
border-radius: 30%;
height: 84%;
margin: 8%;
position: absolute;
width: 84%;
vertical-align: middle;
z-index: 5000;
}
.product:hover .effect-1,
.product:hover .effect-2 {
display: block;
}
.effect-1,
.effect-2 {
border-radius: 30%;
display: none;
mix-blend-mode: multiply;
height: 84%;
opacity: 1;
position: absolute;
width: 84%;
z-index: 3000;
}
.effect-1 {
animation: rotate 1.8s linear infinite;
background: cyan;
}
.effect-2 {
animation: rotate 1.2s linear reverse infinite;
background: #e7a9ff;
}
@keyframes rotate {
0% {
top: 0;
left: 8%;
}
25% {top: 8%;
left: 0%;
}
50% {
top: 16%;
left: 8%;
}
75% {
top: 8%;
left: 16%;
}
100% {
top: 0;
left: 8%;
}
}
.title {
position: relative;
top: calc(100% + 16px);
}
.title span {
display: block;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.6rem;
letter-spacing: 0.1rem;
margin-top: 8px;
text-transform: uppercase;
}
.exercise {
background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
border-radius: 5px;
height: 50%;
margin: 25%;
width: 50%;
}
</style>
</head>
<body>
CREATE BY:<address>ABHISHEK</address>
<div class="container">
<div class="product">
<div class="effect-1"></div>
<div class="effect-2"></div>
<div class="content">
<div class="exercise"></div>
</div>
<span class="title">
Exercise
<span>Boost Endorphins</span>
</span>
</div>
</body>
</html>
Code download link 🔗:- click here..
W3 School website link 👉:- click here..
YouTube channel link 👉:- click here..
0 Comments