ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вращающееся кнопка при помощи CSS

Вращающееся кнопка при помощи CSS

Оригинальная кнопка в цветном виде, что по умолчанию вращается, где при наведении сменяет оттенок цвета, где создана для привлечения внимание. Ее при входе на сайт сразу можно заметить, так как своими характеристиками сразу привлекает, а точнее она всегда вращается. По центру у ее будет написано, это может быть любой запрос, чтоб как можно больше переходили по ссылки, так как она для этого сделана. Все на чистых стилях выведено, это как палитра цвета, что меняется при наведеньи, и вращение не прекращается, что на темном фоне отлично смотрится.

Так, как сейчас, на современном дизайн кнопки стали неотъемлемой частью развития интерфейса или стилистики. Таким образом, прежде чем начинать стилизацию, важно иметь в виду несколько вещей. Это способы стилизации кнопок с помощью CSS. Но здесь идет немного от другом, хотя она так же как и другие кнопки не отличается от основы. Здесь больше идет на привлечение, что будет отлично срабатывать. Что не нужно делать яркие тона или большие по размеру кнопки, когда можно поставить такой элемент и он сработает как нужно, а точнее как можно больше привлечет внимание, что и требуется от такого дизайн.

Так будет по умолчанию, где заданная палитра.

Кнопка для сайта

Здесь уже сработал второй эффект на смену палитры цвета.

Кнопка для сайта на стилях CSS

Приступаем к установки:

HTML

Код

<div class="situakop_ldtunsa">
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="tsahil_pogdenub"><i></i></div>
  <div class="dulopanetam">ZORNET.RU</div>
</div>

CSS

Код

.situakop_ldtunsa {
  position: relative;
  margin: 59px auto;
  width: 241px;
  height: 121px;
  overflow: hidden;
  color: #19ff0b;
}
.situakop_ldtunsa:hover {
  cursor: pointer;
  color: #77fff4;
  transition: all 0.5s;
}
.situakop_ldtunsa .tsahil_pogdenub {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(1) {
  transform: rotate(0deg);
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(2) {
  transform: rotate(90deg);
  margin-left:60px;
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(3) {
  transform: rotate(180deg);
}
.situakop_ldtunsa .tsahil_pogdenub:nth-of-type(4) {
  transform: rotate(270deg);
  margin-left:-60px;
}
.situakop_ldtunsa .tsahil_pogdenub i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 5px dashed;
  animation: move 3.5s infinite linear;
}
.situakop_ldtunsa .dulopanetam {
  width: 241px;
  line-height: 123px;
  display: block;
  text-align: center;
  position: absolute;
  font-size: 35px;
}

@keyframes move {
  from {
  transform: translateX(0%);
  }
  to {
  transform: translateX(-50%);
  }
}

Здесь веб мастер сам может выставить как цветовую палитру и скорость вращение, не говоря о параметрах, как высота и ширина.

Демонстрация

05 Мая 2018 Просмотров: 1468 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0