ZorNet.Ru — сайт для вебмастера » Графика для сайта » 5 стилей hover-эффекта CSS для кнопок

5 стилей hover-эффекта CSS для кнопок

Легкие по функциональности своей 5 видов эффекта для кнопки, которые используют чистый CSS, где отлично подойдут на многие тематические сайты. Итак, если вы в поиске классных или стильных кнопок, которые при виде своем призывают к действию для использования на вашем сайте, как скачать или перейти по ссылке, то здесь вам повезло.

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

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

Установка:

HTML

Код

<div class="valreadavu-mesoukobusil">
  <button class="nesebsia-ciagedia-1">ZORNET.RU 1</button>
  <button class="nesebsia-ciagedia-2">ZORNET.RU 2</button>
  <button class="nesebsia-ciagedia-3">ZORNET.RU 3</button>
  <button class="nesebsia-ciagedia-4">ZORNET.RU 4</button>
  <button class="nesebsia-ciagedia-5">ZORNET.RU 5</button>
</div>

CSS

Код

.valreadavu-mesoukobusil {
  padding: 34px;
}

/* ОБЩАЯ КНОПКА СТИЛИНГ */
button,
button::after {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  cursor:pointer;
}

button {
  background: none;
  border: 3px solid #f9ecec;
  border-radius: 5px;
  color: #f5e9e9;
  display: block;
  font-size: 15px;
  font-weight: bold;
  margin: 5px auto;
  padding: 20px 75px;
  position: relative;
  text-transform: uppercase;
}

button::before, button::after {
  background: #f9f1f1;
  content: '';
  position: absolute;
  z-index: -1;
}

button:hover {
  color: #135c88;
}

/* BUTTON 1 */
.nesebsia-ciagedia-1::after {
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.nesebsia-ciagedia-1:hover:after {
  height: 100%;
}

/* BUTTON 2 */
.nesebsia-ciagedia-2::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.nesebsia-ciagedia-2:hover:after {
  width: 100%;
}

/* BUTTON 3 */
.nesebsia-ciagedia-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.nesebsia-ciagedia-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* BUTTON 4 */
.nesebsia-ciagedia-4::before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.nesebsia-ciagedia-4::after {
  background: #1B7BB5;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.nesebsia-ciagedia-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

/* BUTTON 5 */
.nesebsia-ciagedia-5 {
  overflow: hidden;
}

.nesebsia-ciagedia-5::after {
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.nesebsia-ciagedia-5:hover:after {
  height: 100%;
  width: 140%;
}

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

Где далее по нумерации выбираем тот трюк эффекта, который по вашему мнению должен отлично подойти на интернет ресурс, плюс его преобразить.

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

24 Мая 2019 Загрузок: 1 Просмотров: 1145 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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