پیشنمایش زنده
کد HTML
<button>
EQUIPEMENTS
<div class="icon-1">
<svg
width="76"
height="92"
viewBox="0 0 152 185"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5V0.5ZM69 8L75.8666 4.98345L73.897 0.5H69V8ZM8 15.5H69V0.5H8V15.5ZM62.1334 11.0165L138.133 184.017L151.867 177.983L75.8666 4.98345L62.1334 11.0165Z"
fill="black"
></path>
</svg>
</div>
<div class="icon-2">
<svg
width="79"
height="84"
viewBox="0 0 158 177"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.88718 168.227C-8.11282 144.727 7.88718 121.727 48.8872 111.727C57.8872 93.2269 84.3872 66.227 89.8872 57.227C95.3872 48.227 147.887 -20.773 156.387 6.22697C169.387 55.727 62.3872 80.727 71.8872 120.227C81.3872 159.727 15.8872 191.727 3.88718 168.227Z"
fill="black"
></path>
</svg>
</div>
</button>
کد CSS
button {
position: relative;
padding: 20px 20px;
background: #ff4081;
font-size: 17px;
font-weight: 900;
color: #fff;
border: none;
border-radius: 15px;
transition: all 0.3s ease-in-out;
}
.icon-1 {
position: absolute;
top: 10%;
left: 30%;
transform: translate(-50%, 0);
width: 0px;
height: auto;
transition: all 0.5s ease-in-out;
z-index: -1;
}
.icon-1 svg {
width: 52px;
height: 16px;
transition: all 0.5s ease-in-out;
}
.icon-2 svg {
width: 16px;
height: 12px;
transition: all 0.5s ease-in-out;
}
button:hover .icon-1 svg {
width: 152px;
height: 116px;
}
button:hover .icon-2 svg {
width: 116px;
height: 102px;
}
.icon-2 {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
width: 0px;
height: auto;
transition: all 0.5s ease-in-out;
z-index: -2;
}
button:hover {
padding: 30px 20px;
border-radius: 15px 15px 70px 70px;
}
button:hover .icon-1 {
top: -60%;
left: -20%;
transform: translate(-50%, 0);
width: 50px;
height: auto;
animation: inIcon1 1s ease 0.45s forwards;
}
@keyframes inIcon1 {
0% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(0deg);
}
25% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(5deg);
}
50% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(1deg);
}
65% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(3deg);
}
100% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(0deg);
}
}
button:hover .icon-2 {
position: absolute;
top: -60%;
left: 60%;
transform: translate(-50%, 0);
width: 75px;
height: auto;
animation: inIcon2 1s ease 0.45s forwards;
}
@keyframes inIcon2 {
0% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(0deg);
}
35% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(10deg);
}
50% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(4deg);
}
80% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(5deg);
}
100% {
transform-origin: 0 100%;
transform: translate(-50%, 0) rotate(2deg);
}
}