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

Кнопки с эффектом текста вниз на CSS

Кнопки с эффектом текста вниз на CSS
Рассмотрим красивый эффект для текста, который находится по вверх кнопки с помощью HTML и CSS, где при наведении курсора текстура скользит вниз. Все очень просто и красиво сделано, где пишем изначально текст кнопки, который скользит вниз и автоматически раскрывается с верхней стороны, где мы видим аналогичное название, что изначально по умолчанию написано, как ключевое значение для действия.

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

Красивые кнопки на чистом CSS с анимацией и hover эффектом:

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

HTML

Код
<a href="#" data-text="Zornet.ru" class="button-hover">Zornet.ru</a>
  <a href="#" data-text="Скрипты" class="button-hover">Скрипты</a>
  <a href="#" data-text="Шаблоны" class="button-hover">Шаблоны</a>
  <a href="#" data-text="Download" class="button-hover">Download</a>

CSS

Код
.button, [class*="button-"] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  float: left;
  margin: 0 1em 1em 0;
  padding: 0 4em;
  height: 3.5em;
  font: 300 1em/3.5em 'Open Sans', sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(19, 17, 17, 0.43);
  letter-spacing: .08em;
  color: #fbfbfb;
  background: #1a7a9a;
  border: solid 1px #fff;
  border-radius: 5px;
  -moz-transition: ease 0.35s all;
  -o-transition: ease 0.35s all;
  -webkit-transition: ease 0.35s all;
  transition: ease 0.35s all;
  border: 2px solid rgb(251, 251, 251);
  box-shadow: 0px 4px 7px rgba(247, 247, 247, 0.4), 0px 0px 12px 1px rgba(214, 209, 209, 0.48);
}
  .button:hover,
  [class*="button-"]:hover {
  background: #07495f;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
  }
  .button-hover:hover {
  line-height: 9em;
  }
  .button-hover:before {
  content: attr(data-text);
  color: #dce8ec;
  position: absolute;
  top: -2.75em;
  }

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

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

Видео обзор:

21 Октября 2019 Загрузок: 1 Просмотров: 956 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 21 Октября 2019 17:361
0
Также давайте рассмотрим аналогичный эффект CSS3 наведите курсор мыши на текст в div, который идет по аналогичному трюку, но разве только по конструкций создан по другому.

HTML

Код
<div class="dekopas-kasvemug">
  <span class="dekdak-simug">
  Первый
  </span>
  <span>
  Второй
  </span>
</div>


CSS

Код
.dekopas-kasvemug span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}

.dekopas-kasvemug, .dekdak-simug {
  transition: 0.3s;  
}

.dekopas-kasvemug {
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.dekdak-simug{
  margin-top: 0em;  
}

.dekopas-kasvemug:hover .dekdak-simug{
  margin-top: -4em;
}


Демонстрация
Войдите:
avatar