پیشنمایش زنده
کد HTML
<div class="button-box">
<div class="touch left"></div>
<div class="touch middle"></div>
<div class="touch right"></div>
<div class="button">
<svg
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M446.208 566.72h369.28c-2.944 103.808-39.36 190.72-109.376 260.736s-156.608 106.432-259.904 109.376c-103.808-2.944-190.72-39.36-260.736-109.376s-106.432-156.928-109.376-260.736c2.944-103.232 39.36-189.888 109.376-259.904S342.4 200.448 446.208 197.504v369.216z m383.296-383.232c70.016 70.016 106.432 156.928 109.376 260.736H568.704V74.112c103.872 2.944 190.784 39.36 260.8 109.376z"
data-spm-anchor-id="a313x.search_index.0.i11.7c823a81dxNrAs"
fill="#ffffff"
></path>
</svg>
</div>
<div class="button">
<svg
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M773.907692 992.768h-590.76923c-48.864492 0-88.615385-39.754831-88.615385-88.615385V120.032492c0-48.852677 39.743015-88.615385 88.599631-88.631138l379.076923-0.169354h0.047261c35.233477 0 78.217846 18.699815 102.230646 44.480985l158.0032 169.621661C845.686154 270.245415 862.523077 313.040738 862.523077 347.096615v300.780308c0 27.1872-22.043569 49.230769-49.230769 49.230769s-49.230769-22.043569-49.23077-49.230769V347.096615c0-9.168738-7.388554-27.951262-13.627076-34.650584l-158.011077-169.6256c-5.490215-5.891938-22.122338-13.126892-30.176493-13.126893h-0.003938L192.984615 129.858954V894.306462h571.076923V805.415385c0-27.1872 22.043569-49.230769 49.23077-49.23077s49.230769 22.043569 49.230769 49.23077v98.73723c0 48.864492-39.754831 88.615385-88.615385 88.615385z"
data-spm-anchor-id="a313x.search_index.0.i7.7c823a81dxNrAs"
class="selected"
fill="#ffffff"
></path>
<path
d="M414.802708 753.829415a49.092923 49.092923 0 0 1-34.812062-14.418707l-90.289231-90.285293c-19.223631-19.223631-19.227569-50.396554 0-69.624123 19.223631-19.223631 50.396554-19.223631 69.624123 0l55.47717 55.473231 187.7504-187.746461c19.227569-19.223631 50.396554-19.219692 69.624123 0 19.227569 19.227569 19.227569 50.396554 0 69.624123l-222.562462 222.558523a49.073231 49.073231 0 0 1-34.812061 14.418707z"
data-spm-anchor-id="a313x.search_index.0.i8.7c823a81dxNrAs"
fill="#ffffff"
></path>
</svg>
</div>
<div class="button">
<svg
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M793.6 678.4c29.866667-51.2 81.066667-76.8 132.266667-72.533333 8.533333-29.866667 12.8-64 12.8-98.133334 0-29.866667-4.266667-59.733333-8.533334-85.333333-51.2 8.533333-106.666667-21.333333-136.533333-72.533333-29.866667-51.2-25.6-115.2 8.533333-153.6-46.933333-42.666667-98.133333-72.533333-157.866666-93.866667-17.066667 51.2-68.266667 85.333333-132.266667 85.333333s-110.933333-34.133333-132.266667-85.333333c-59.733333 21.333333-110.933333 55.466667-157.866666 98.133333 34.133333 42.666667 38.4 102.4 8.533333 153.6-29.866667 51.2-85.333333 76.8-136.533333 68.266667-4.266667 29.866667-8.533333 59.733333-8.533334 89.6 0 34.133333 4.266667 64 12.8 93.866667 51.2-4.266667 102.4 21.333333 132.266667 72.533333 25.6 51.2 25.6 106.666667-4.266667 149.333333 46.933333 42.666667 98.133333 72.533333 157.866667 89.6 21.333333-46.933333 68.266667-76.8 128-76.8s106.666667 29.866667 128 76.8c59.733333-17.066667 110.933333-51.2 157.866667-89.6-29.866667-42.666667-34.133333-98.133333-4.266667-149.333333z m-281.6 17.066667c-102.4 0-183.466667-81.066667-183.466667-183.466667S409.6 328.533333 512 328.533333s183.466667 81.066667 183.466667 183.466667-81.066667 183.466667-183.466667 183.466667z"
data-spm-anchor-id="a313x.search_index.0.i0.40a93a81w1AXrL"
fill="#ffffff"
></path>
</svg>
</div>
</div>
کد CSS
.button-box {
position: relative;
width: 12rem;
height: 5rem;
display: flex;
}
.button-box .button {
width: 3.2rem;
height: 3.2rem;
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
border: 3px solid #311703;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
opacity: 0.85;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}
.button-box .button .icon {
width: 24px;
height: 24px;
opacity: 0.7;
transition: 0.25s;
}
.button-box .button:nth-child(4) {
transform: translate(-50%, -50%) rotate(90deg);
z-index: 30;
background: #ff7f50;
}
.button-box .button:nth-child(5) {
transform: translate(-50%, -50%) rotate(-115deg);
z-index: 40;
background: #ffd700;
}
.button-box .button:nth-child(6) {
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 50;
background: #019b98;
}
.button-box .button:nth-child(6) .icon {
animation: active 2.2s linear infinite;
}
.button-box .touch {
position: relative;
z-index: 60;
height: 100%;
flex: 1;
cursor: pointer;
}
.button-box .touch.left:hover ~ .button:nth-child(4) {
opacity: 1;
transform: translate(-170%, -50%) rotate(-90deg) scale(1.05);
}
.button-box .touch.left:hover ~ .button:nth-child(4) .icon {
width: 25px;
opacity: 0.9;
}
.button-box .touch.left:active ~ .button:nth-child(4) {
transform: translate(-170%, -50%) rotate(-90deg) scale(0.9);
}
.button-box .touch.right:hover ~ .button:nth-child(5) {
opacity: 1;
transform: translate(70%, -50%) rotate(90deg) scale(1.05);
}
.button-box .touch.right:hover ~ .button:nth-child(5) .icon {
width: 25px;
opacity: 0.9;
}
.button-box .touch.right:active ~ .button:nth-child(5) {
transform: translate(70%, -50%) rotate(90deg) scale(0.9);
}
.button-box .touch.middle:hover ~ .button:nth-child(6) {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) scale(1.05);
}
.button-box .touch.middle:hover ~ .button:nth-child(6) .icon {
width: 25px;
opacity: 0.9;
}
.button-box .touch.middle:active ~ .button:nth-child(6) {
transform: translate(-50%, -50%) rotate(0deg) scale(0.9);
}
.button-box:hover .button:nth-child(4) {
transform: translate(-170%, -50%) rotate(-90deg);
}
.button-box:hover .button:nth-child(5) {
transform: translate(70%, -50%) rotate(90deg);
}
.button-box:hover .button:nth-child(6) {
transform: translate(-50%, -50%) rotate(0deg);
}
.button-box:hover .button:nth-child(6) .icon {
animation: active 4s linear infinite;
}
@keyframes active {
to {
transform: rotate(360deg);
}
}