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

Стильный hover эффект CSS для кнопки

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

Это комбинировать большинство методов для создания нового стиля. Ведь когда есть рабочая основа, то здесь веб-разработчик выставляет все данные как ему нужно, главное, чтоб эффект отлично работал.

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

При открытие сайта и страницы:

Кнопка стильного эффекта при наведение клика

При наведение на элемент курсора:

Анимационный эффект для кнопки на чистом CSS

Установка:

HTML

Здесь изначально присутствовал только эффект, где добавил код под ссылку перехода.

Код

<button class="nandmaid"><a href="" rel="nofollow" target="_blank" title=""><span>ZORNET.RU</span></button>

CSS

Код

.nandmaid {
box-shadow: 0px 4px 10px rgba(162, 156, 156, 0.65), 0px 0px 6px 2px rgba(134, 129, 129, 0.1);
}

button {
  position: relative;
  min-width: 235px;
  padding: 20px 10px 20px 10px;
  background: none;
  border: none;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: left;
  cursor: pointer;

}
button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 3px;
  background: #171515;
  transition: .5s;
}
button span {
  display: inline-block;
  width: 0;
  text-align: center;
font-size: 15px;
color: #232121;
  transition: width .7s, color .5s;
}

button:hover::before {
  height: 100%;
}

button:hover span {
  width: 100%;
  color: #e8e8fb;
  transition: .5s;
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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