Вращающееся кнопка при помощи 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">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%);

  }

}

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


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

  • Переключатель с использованием CSS и JS
  • Думаю многим интересно процесс создания оригинальных переключателей, которые можно увидеть на любом тематическом сайте под функцией.

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация