Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Движение кнопки влево-вправо

Движение кнопки влево-вправо

galina2601 21-09-2021, 19:02 229 Уроки по CSS

Очень часто, чтобы привлечь внимание посетителей сайта и побудить их сделать какое-либо действие, на страницу добавляют яркую кнопку.

На кнопке призыв - нажми на меня, заходи, открой... И так далее.

Но мало просто добавить кнопку, даже яркую, лучше сделать ее активной.

Вот, к примеру, кнопка, которая совершает движения влево-вправо, тем самым привлекая внимание.

При наведении курсора на кнопку, она меняет цвет и анимация останавливается.


Нажми на меня

Сделать это абсолютно легко.

Итак.

Код самой кнопки:

<div class="animate-motion">Нажми на меня</div>

Стили для кнопки:

.animate-motion {
height: 32px;
width:50%;
margin:0 auto;
line-height: 32px;
background: #E41931;
border-radius: 20px;
font-weight: bold;
font-size: 22px;
padding: 20px;
text-align: center;
color: #FFFFFF;
animation: animate_motion 5s 0s both infinite;
}
.animate-motion:hover {
animation: none;
cursor:pointer;
background: #b61629;
}

@keyframes animate_motion {
0%, 20% {
transform: translate3d(0, 0, 0);
}
10%, 14%, 18%, 2%, 6% {
transform: translate3d(-7px, 0, 0);
}
12%, 16%, 4%, 8% {
transform: translate3d(7px, 0, 0);
}
}

Вот и все.

Похожие новости

  • Список с анимированным маркером на CSS
  • Как разместить полупрозрачный блок поверх слайдера?
  • Анимация с помощью CSS
  • Оформление блока div рамкой с закругленными углами и тенью
  • Как изменить шрифт с помощью css

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив