پیش‌نمایش زنده
کد HTML
<div class="uverse-widget-container">
  <div id="wrapper" class="twist">
    <div id="button">
      <div id="button_inner" class="spin">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div id="shadow"></div>
  </div>
</div>
کد CSS
.uverse-widget-container {
  background-color: #5a3410;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
}

#wrapper {
  width: 160px;
}

#button {
  display: block;
  width: 150px;
  height: 150px;
  background: #e9946d;
  border-radius: 75px;
  -moz-border-radius: 75px;
  box-shadow: -7px 0 0 #b25b25;
  -moz-box-shadow: -7px 0 0 0 #b25b25;
  -webkit-box-shadow: -7px 0 0 0 #b25b25;
  cursor: pointer;
  transition: all 0.15s ease;
}

#button_inner {
  display: block;
  width: 100px;
  height: 100px;
  background: #e9946d;
  border-radius: 50px;
  -moz-border-radius: 50px;
  box-shadow: inset -7px 0 0 #b25b25;
  -moz-box-shadow: inset -7px 0 0 #b25b25;
  -webkit-box-shadow: inset -7px 0 0 #b25b25;
  position: relative;
  left: 25px;
  top: 25px;
  border: 2px solid #b25b25;
}

#button_inner ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

#button_inner ul li {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 4px;
  background: #5a3410;
  border-radius: 9px;
  -moz-border-radius: 9px;
  box-shadow: inset -3px 0 0 #b25b25;
  -moz-box-shadow: inset -3px 0 0 #b25b25;
  -webkit-box-shadow: inset -3px 0 0 #b25b25;
  position: relative;
  top: 22px;
  left: 20px;
}

#shadow {
  position: relative;
  height: 12px;
  width: 140px;
  top: 30px;
  left: 0px;
  background-image: -moz-radial-gradient(
    50% 50%,
    ellipse closest-corner,
    rgba(41, 24, 8, 0.7),
    rgba(91, 53, 17, 0.7) 74%
  );
  background-image: -webkit-radial-gradient(
    50% 50%,
    ellipse closest-corner,
    rgba(41, 24, 8, 0.7),
    rgba(91, 53, 17, 0.7) 74%
  );
  background-image: -o-radial-gradient(
    50% 50%,
    ellipse closest-corner,
    rgba(41, 24, 8, 0.7),
    rgba(91, 53, 17, 0.7) 74%
  );
  background-image: -ms-radial-gradient(
    50% 50%,
    ellipse closest-corner,
    rgba(41, 24, 8, 0.7),
    rgba(91, 53, 17, 0.7) 74%
  );
  background-image: radial-gradient(
    50% 50%,
    ellipse closest-corner,
    rgba(41, 24, 8, 0.7),
    rgba(91, 53, 17, 0.7) 74%
  );
  transition: all 0.15s ease;
}

#button:active {
  box-shadow: -2px 0 0 #b25b25;
  -moz-box-shadow: -2px 0 0 0 #b25b25;
  -webkit-box-shadow: -2px 0 0 0 #b25b25;
  transform: translateX(-5px);
}

#wrapper:active #shadow {
  transform: scale(0.95) translateX(-3px);
  opacity: 0.8;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 8s linear infinite;
}

@-webkit-keyframes twist {
  from {
    -webkit-transform: scaleX(1);
  }
  to {
    -webkit-transform: scaleX(0.9);
  }
}

@keyframes twist {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.9);
  }
}

.twist {
  -webkit-animation: twist 3s ease-in-out infinite;
  -webkit-animation-direction: alternate;
  animation: twist 3s ease-in-out infinite alternate;
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05