پیشنمایش زنده
کد HTML
<div class="button">
<div class="big-circle">
<div class="border-circle">
<button class="real-button"></button>
</div>
<div class="shadow"></div>
</div>
<div class="width-border-circle"></div>
</div>
کد CSS
.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.big-circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
width: 110px;
height: 110px;
border-radius: 50%;
border: 0px solid;
background: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(182, 182, 182) 0%,
rgba(0, 0, 0, 1) 100%
);
box-shadow: 0 2px 0 #cdd2da;
cursor: pointer;
transition: 50ms ease;
}
.border-circle {
position: absolute;
background: rgb(0, 0, 0);
background: linear-gradient(
90deg,
rgb(150, 150, 150) 0%,
rgb(0, 0, 0) 50%,
rgba(150, 150, 150, 1) 100%
);
width: 70px;
height: 70px;
border-radius: 50%;
}
.shadow {
position: absolute;
background: radial-gradient(
circle,
rgb(0, 0, 0) 0%,
rgb(99, 99, 99) 40%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0) 100%
);
width: 150px;
height: 150px;
border-radius: 50%;
bottom: -80px;
opacity: 0.2;
transition: 100ms ease;
}
.real-button {
border: none;
position: absolute;
background-color: rgb(143, 238, 0);
width: 70px;
height: 70px;
border-radius: 50%;
cursor: pointer;
transform: translateY(-8px);
box-shadow: 0 9px 0 rgb(92, 165, 9);
transition: 50ms ease;
}
.button:hover .real-button {
box-shadow: 0 13px 0 rgb(92, 165, 9);
translate: 0 -5px;
}
.button:active .real-button {
background: rgba(184, 255, 74, 1);
box-shadow: 0 0px 0 rgb(92, 165, 9);
translate: 0 8px;
filter: drop-shadow(0 0 5px rgba(184, 255, 74, 1));
}
.button:active .big-circle {
background: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(182, 182, 182) 0%,
rgb(26, 26, 26) 100%
);
box-shadow: 0 2px 0 #cdd2da;
}
.button:active .shadow {
opacity: 0;
}
.width-border-circle {
position: absolute;
width: 110px;
height: 114px;
border-radius: 50%;
background: rgb(0, 0, 0);
background: linear-gradient(
90deg,
rgb(49, 49, 49) 0%,
rgb(150, 150, 150) 50%,
rgb(49, 49, 49) 100%
);
z-index: -1;
bottom: -10px;
}