پیشنمایش زنده
کد HTML
<section class="row">
<div class="touch">
<div class="t t1"></div>
<div class="t t2"></div>
<div class="t t3"></div>
<div class="t t4"></div>
</div>
<div class="container">
<div class="around">
<div class="handle">
<div class="button-wrapper">
<div class="inside">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</div>
<svg class="icon" viewBox="0 0 1024 1024">
<path
d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z"
></path>
</svg>
<svg
class="icon"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M135.417 100C135.417 102.917 134.583 105.833 132.5 107.917L86.6667 162.083C82.0833 167.5 74.1667 167.917 69.1667 163.75C63.75 159.167 63.3333 151.25 67.5 146.25L106.667 100L67.5 53.75C62.9167 48.3333 63.75 40.4167 69.1667 36.25C74.5833 31.6667 82.5 32.5 86.6667 37.9167L132.5 92.0833C134.583 94.1667 135.417 97.0833 135.417 100Z"
></path>
</svg>
<svg
class="icon"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 135.417C97.0833 135.417 94.1667 134.583 92.0833 132.5L37.9167 86.6667C32.5 82.0833 32.0833 74.1667 36.25 69.1667C40.8333 63.75 48.75 63.3333 53.75 67.5L100 106.667L146.25 67.5C151.667 62.9167 159.583 63.75 163.75 69.1667C168.333 74.5833 167.5 82.5 162.083 86.6667L107.917 132.5C105.833 134.583 102.917 135.417 100 135.417Z"
></path>
</svg>
<svg
class="icon"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M64.5833 100C64.5833 97.0833 65.4167 94.1667 67.5 92.0833L113.333 37.9167C117.917 32.5 125.833 32.0833 130.833 36.25C136.25 40.8333 136.667 48.75 132.5 53.75L93.3333 100L132.5 146.25C137.083 151.667 136.25 159.583 130.833 163.75C125.417 168.333 117.5 167.5 113.333 162.083L67.5 107.917C65.4167 105.833 64.5833 102.917 64.5833 100Z"
></path>
</svg>
</div>
</section>
کد CSS
.row {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
.around {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-image: linear-gradient(0, #f5f8fa, #9da4a8);
.handle {
width: 155px;
height: 155px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #c5d1da;
box-shadow:
0 0 10px rgba(0, 0, 0, 0.5),
0 10px 10px rgba(0, 0, 0, 0.2),
inset 0 0 16px rgba(0, 0, 0, 0.85),
inset 0 0 24px rgba(0, 0, 0, 0.75),
inset 0 0 48px rgba(0, 0, 0, 0.2);
perspective: 300px;
.button-wrapper {
width: 102px;
height: 102px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-image: linear-gradient(0, #86969c, #eff1f1);
box-shadow:
0 9px 14px rgba(0, 0, 0, 0.5),
0 19px 8px -2px rgba(0, 0, 0, 0.2),
0 33px 8px rgba(0, 0, 0, 0.4),
0 -12px 10px rgba(255, 255, 255, 0.5),
inset 0 3px 3px rgba(255, 255, 255, 0.6),
inset 0 -3px 3px rgba(89, 91, 92, 0.6);
transition: 0.25s ease-out;
.inside {
position: relative;
width: 85px;
height: 85px;
border-radius: 50%;
background-image: linear-gradient(180deg, #adb9bf, #d4dbdd);
box-shadow:
inset 0 3px 6px rgba(152, 160, 163, 0.4),
inset 0 -3px 6px rgba(238, 244, 246, 0.4);
.dot {
position: absolute;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #e7ecef;
box-shadow:
0 2px 2px rgba(0, 0, 0, 0.3),
inset 0 -2px 2px rgba(0, 0, 0, 0.2);
&:nth-child(1) {
left: 50%;
top: 10%;
}
&:nth-child(2) {
left: 90%;
top: 50%;
}
&:nth-child(3) {
left: 50%;
top: 90%;
}
&:nth-child(4) {
left: 10%;
top: 50%;
}
}
}
}
}
}
.icon {
position: absolute;
transform: translate(-50%, -50%);
width: 30px;
fill: #b4b9bd;
filter: drop-shadow(1px 1px 1px #f4f4f4);
&:nth-child(2) {
top: -12%;
left: 50%;
}
&:nth-child(3) {
top: 50%;
left: 112%;
}
&:nth-child(4) {
top: 112%;
left: 50%;
}
&:nth-child(5) {
top: 50%;
left: -12%;
}
}
.icon.active {
fill: #e3a560;
filter: brightness(0.9) drop-shadow(0 0 2px #e3a15b)
drop-shadow(0 0 1px #fff);
}
}
.touch {
position: absolute;
display: flex;
flex-wrap: wrap;
z-index: 999;
width: 600px;
height: 600px;
transform: rotate(45deg);
.t {
width: 300px;
height: 300px;
}
}
.row:has(.t1:hover) {
.button-wrapper {
transform-style: preserve-3d;
transform: translate(0, -5px) rotateX(8deg);
box-shadow:
0 7px 14px rgba(0, 0, 0, 0.5),
0 14px 8px -5px rgba(0, 0, 0, 0.3),
0 24px 8px rgba(0, 0, 0, 0.4),
0 -6px 10px rgba(255, 255, 255, 0.5),
inset 0 3px 3px rgba(255, 255, 255, 0.6),
inset 0 -3px 3px rgba(89, 91, 92, 0.6) !important;
}
.icon:nth-child(2) {
fill: #eaa75d;
filter: brightness(0.9) drop-shadow(0 0 2px #f1b475)
drop-shadow(0 0 1px #fff);
}
}
.row:has(.t2:hover) {
.button-wrapper {
transform-style: preserve-3d;
transform: translate(5px, 0) rotateY(8deg);
box-shadow:
2px 9px 14px rgba(0, 0, 0, 0.4),
2px 19px 8px -2px rgba(0, 0, 0, 0.2),
2px 30px 8px rgba(0, 0, 0, 0.3),
-6px -14px 10px rgba(255, 255, 255, 0.5),
inset 0 3px 3px rgba(255, 255, 255, 0.6),
inset 0 -3px 3px rgba(89, 91, 92, 0.6) !important;
}
.icon:nth-child(3) {
fill: #e3a560;
filter: brightness(0.9) drop-shadow(0 0 2px #e3a15b)
drop-shadow(0 0 1px #fff);
}
}
.row:has(.t3:hover) {
.button-wrapper {
transform-style: preserve-3d;
transform: translate(-5px, 0) rotateY(-8deg);
box-shadow:
-2px 9px 14px rgba(0, 0, 0, 0.4),
-2px 19px 8px -2px rgba(0, 0, 0, 0.2),
-2px 30px 8px rgba(0, 0, 0, 0.3),
6px -14px 10px rgba(255, 255, 255, 0.5),
inset 0 3px 3px rgba(255, 255, 255, 0.6),
inset 0 -3px 3px rgba(89, 91, 92, 0.6) !important;
}
.icon:nth-child(5) {
fill: #e3a560;
filter: brightness(0.9) drop-shadow(0 0 2px #e3a15b)
drop-shadow(0 0 1px #fff);
}
}
.row:has(.t4:hover) {
.button-wrapper {
transform-style: preserve-3d;
transform: translate(0, 5px) rotateX(-8deg);
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.6),
0 19px 8px -2px rgba(0, 0, 0, 0.3),
0 34px 8px rgba(0, 0, 0, 0.4),
0 -14px 10px rgba(255, 255, 255, 0.65),
inset 0 3px 3px rgba(255, 255, 255, 0.6),
inset 0 -3px 3px rgba(89, 91, 92, 0.6) !important;
}
.icon:nth-child(4) {
fill: #e3a560;
filter: brightness(0.9) drop-shadow(0 0 2px #e3a15b)
drop-shadow(0 0 1px #fff);
}
}