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

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



Так, как сейчас, на современном дизайн кнопки стали неотъемлемой частью развития интерфейса или стилистики. Таким образом, прежде чем начинать стилизацию, важно иметь в виду несколько вещей. Это способы стилизации кнопок с помощью 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">CSSAVE.AT.UA</div> 

</div>


CSS 

Код
body{

margin-top:25px;

background: #2a2a2f;

  background-size:cover;

}

.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.05.2018, 14:35
  • Просмотры: 64
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий