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

Стильная кнопка с уникальным Hover эффект CSS3

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

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

Так будет на светлом фоне, где все настройка по умолчанию установлены.

Здесь только навели курсор, но также есть эффект под клик.

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

HTML

Код

<a class="kartenul_vezilposa" href="http://zornet.ru" title="Click Me">ZORNET.RU</a>

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

CSS

Код

.kartenul_vezilposa {
  position: relative;
  top: 0px;
  font-size: 29px;
  display: inline-block;
  padding: 19px 117px;
  color: #252546;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
  border: 2.7px solid #323233;
  -webkit-transition: all 370ms;
  -moz-transition: all 370ms;
  -o-transition: all 370ms;
  transition: all 370ms;
}

.kartenul_vezilposa::before{
  content: '';
  position: absolute;
  top: 47%;
  left: 47%;
  width: 0;
  height: 0;
  background-color: #1c1c38;
  border-radius: 0px;
  -webkit-transition: all 370ms;
  -moz-transition: all 370ms;
  -o-transition: all 370ms;
  transition: all 370ms;
  z-index: -1;
}

.kartenul_vezilposa:hover{
  color: #fbf9f9;
}

.kartenul_vezilposa:active{
  top: 2px;
}

.kartenul_vezilposa:hover::before{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

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

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

13 Мая 2018 Просмотров: 933 Комментариев: (0)

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

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

Kosten

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