ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайд-эффекты кнопок на чистом CSS

Слайд-эффекты кнопок на чистом CSS

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

Как можно заметить, что выходом CSS3 и HTML5 веб-разработки стали выстраивать красивые элементы эффектов, которые можно ставить на многие тематические сайты. Ведь здесь вы не просто гамму цвета выбираете, а само появление, что можно поставить по сторонам или с одной заданной стороны, что производится при клике. И здесь идут несколько примеров, которые продемонстрирую html-разметку.

Так реально выглядит дизайн кнопок:

Кнопки с разными эффектами при наведение клика

Установка:

HTML

Код

<div id="krasiva-premium">
  <div class="slayden-skusnug karused_down">КНОПКА: СЛАЙД ВНИЗ </div>
  <div class="slayden-skusnug karused_right">КНОПКА: СЛАЙД ВПРАВО </div>
  <div class="slayden-skusnug karused_left">КНОПКА: СЛАЙД ВНУТРИ </div>
  <div class="slayden-skusnug karused_diagonal">КНОПКА: ДИАГОНАЛЬНАЯ </div>
</div>

CSS

Код

.slayden-skusnug {
  color: #f7f3f3;
  border: 2px solid rgb(39, 81, 218);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #0254d8;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.karused_down:hover {
  box-shadow: inset 0 100px 0 0 #0d4296;
}

.karused_right:hover {
  box-shadow: inset 400px 0 0 0 #0d4296;
}

.karused_left:hover {
  box-shadow: inset 0 0 0 50px #0d4296;
}

.karused_diagonal:hover {
  box-shadow: inset 400px 50px 0 0 #0d4296;
}

#krasiva-premium {
  width: 364px;
  margin: 50px auto 0 auto;
  text-align: center;
}

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

Теперь по названию, то здесь все просто, потому-как производится выскальзывающие оттенки, или выезжающие, где автоматически заполняем подписи, для того, что корректно смотрелось.

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

21 Октября 2019 Загрузок: 1 Просмотров: 1168 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 29 Октября 2019 01:12¹ 0 Если вас интересует совершенно другой формат, как 3d кнопки, то можете посмотреть материал, где представлены кнопки 3D с эффектом на чистом CSS, что подойдут для светлого или темного сайта.