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

Яркие hover эффекты для кнопок на CSS

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

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

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

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

Первый набор:

Как и прежде, мы собираемся начать с некоторого очень простого HTML-кода, на котором можно повесить наши эффекты:

HTML

Код

<a href="/" class="alkopansag kodesan-1">
  <svg>
  <rect x="0" y="0" fill="none" width="100%" height="100%"/>
  </svg>
  Hover
  </a>
  

  <a href="/" class="alkopansag kodesan-2">Hover</a>
  

  <a href="https://twitter.com/DanyDSBpro" class="alkopansag kodesan-3">Hover</a>
  

  <a href="/" class="alkopansag kodesan-4"><span>Hover</span></a>
  

  <a href="/" class="alkopansag kodesan-5">Hover</a>

CSS

Код

.desanutea-kivasopan {
  display: table;
  height: 100%;
  width: 100%;
}

.sagtuesa-kasnopan {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: #fff;
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 2em;
}
@media (min-width: 450px) {
  h1 {
  font-size: 1.75em;
  }
}
@media (min-width: 760px) {
  h1 {
  font-size: 3.25em;
  }
}
@media (min-width: 900px) {
  h1 {
  font-size: 5.25em;
  margin: 0 0 1em;
  }
}

p {
  color: #fff;
  font-size: 12px;
}
@media (min-width: 600px) {
  p {
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 90%;
  }
}
@media (max-height: 500px) {
  p {
  left: 0;
  position: relative;
  top: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  }
}
p a {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid;
  color: #fff;
  line-height: 1.4;
  padding: .25em;
  text-decoration: none;
}
p a:hover {
  background: white;
  color: #42AACF;
}

.alkopansag {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}
@media (min-width: 400px) {
  .alkopansag {
  display: inline-block;
  margin-right: 2.5em;
  }
  .alkopansag:nth-of-type(even) {
  margin-right: 0;
  }
}
@media (min-width: 600px) {
  .alkopansag:nth-of-type(even) {
  margin-right: 2.5em;
  }
  .alkopansag:nth-of-type(5) {
  margin-right: 0;
  }
}
.alkopansag:hover {
  text-decoration: none;
}

.kodesan-1 {
  background: #42AACF;
  font-weight: 100;
}
.kodesan-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.kodesan-1 rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
}

.kodesan-1:hover {
  background: #42AACF;
  font-weight: 900;
  letter-spacing: 1px;
}
.kodesan-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.kodesan-2 {
  letter-spacing: 0;
}

.kodesan-2:hover,
.kodesan-2:active {
  letter-spacing: 5px;
}

.kodesan-2:after,
.kodesan-2:before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 280ms ease-in-out;
  transition: all 280ms ease-in-out;
  width: 0;
}

.kodesan-2:hover:after,
.kodesan-2:hover:before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-color: #fff;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.kodesan-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

.kodesan-3 {
  background: #42AACF;
  border: 1px solid #8ED2E9;
  box-shadow: 0px 2px 0 #8ED2E9, 2px 4px 6px #8ED2E9;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}

.kodesan-3:hover {
  background: #42AACF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(66,170,207, 0.2);
  color: #ffffff;
  text-decoration: none;
  text-shadow: -1px -1px 0 #42AACF;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.kodesan-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.kodesan-4 span {
  z-index: 20;
}
.kodesan-4:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.kodesan-4:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.kodesan-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.kodesan-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

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

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

Второй набор:

HTML

Код

<div class="vupesamuked-1">
  <div class="kopadenes mesacupib-ksadevam">
  <span>HOVER ME</span>
  </div>
</div>


<div class="vupesamuked-2">
  <div class="kopadenes kopadenes-two">
  <span>HOVER ME</span>
  </div>
</div>


<div class="vupesamuked-3">
  <div class="kopadenes kopadenes-three">
  <span>HOVER ME</span>
  </div>
</div>

CSS

Код

div[class*=vupesamuked] {
  height: 33.33%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vupesamuked-1 { background-color: rgba(41, 128, 185,1.0); }
.vupesamuked-2 { background-color: rgba(142, 68, 173,1.0); }
.vupesamuked-3 { background-color: rgba(26, 188, 156,1.0); }

.kopadenes {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 250px;
  cursor: pointer;
}

/*
========================
  BUTTON ONE
========================
*/
.mesacupib-ksadevam {
  color: #FFF;
  transition: all 0.3s;
  position: relative;
}
.mesacupib-ksadevam span {
  transition: all 0.3s;
}
.mesacupib-ksadevam::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.5);
  transform: scale(0.1, 1);
}
.mesacupib-ksadevam:hover span {
  letter-spacing: 2px;
}
.mesacupib-ksadevam:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}
.mesacupib-ksadevam::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(255,255,255,0.1);
}
.mesacupib-ksadevam:hover::after {
  opacity: 0;
  transform: scale(0.1, 1);
}

/*
========================
  BUTTON TWO
========================
*/
.kopadenes-two {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
}
.kopadenes-two span {
  z-index: 2;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.kopadenes-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.kopadenes-two::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.kopadenes-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.kopadenes-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}

/*
========================
  BUTTON THREE
========================
*/
.kopadenes-three {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
}
.kopadenes-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.kopadenes-three:hover::before {
  opacity: 0 ;
  transform: scale(0.5);
}
.kopadenes-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.kopadenes-three:hover::after {
  opacity: 1;
  transform: scale(1,1);
}

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

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

Почти все призывы к действию, которые вы видите в Интернете, используют какой-либо эффект наведения, потому что они привлекают внимание и делают сайт более привлекательным.

22 Мая 2019 Просмотров: 1304 Комментариев: (0)

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

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

Kosten

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