« CSS кнопка с эффектом скольжения вниз »

Описание материала:

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

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

HTML код:

Код
<a href="#" data-text="ufive.ru" class="button-hover">ufive.ru</a>


CSS код:
Код
.button,
[class*="button-"] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  float: none;
  margin: 0 auto;
  padding: 0 4em;
  height: 3.5em;
  font: 600 1em/3.6em "Cuprum", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.08em;
  color: #393939;
  background: #f3be81;
  border: solid 1px #fff;
  border-radius: 2px;
  -moz-transition: ease 0.35s all;
  -o-transition: ease 0.35s all;
  -webkit-transition: ease 0.35s all;
  transition: ease 0.35s all;
}
.button:hover,
[class*="button-"]:hover {
  background: #f7ae59;
  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: #393939;
  position: absolute;
  top: -2.75em;
}


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 91


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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