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

9 удивительных hover-эффекта кнопок на CSS

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

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

Вот несколько кнопок, где вид идет при открытии страницы:

Подборка кнопок на CSS с Hover эффектами

Установка:

HTML

Код

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas pervaya">Первая Кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas vtoraya">Вторая кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas third">Третья кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas fourth">Четвертая кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas fifth">пятая кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas shestaya">шестая кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas pyataya">седьмая кнопка</a>
</div>

<div class="pugovitsa">
  <a href="#" class="kevalusop-vegas vertaya">Восьмая кнопка</a>
</div>

  <div class="pugovitsa">
  <a href="#" class="kevalusop-vegas chetve">девятая кнопка</a>
</div>

CSS

Код

/* ---------- BUTTONS ---------- */

.pugovitsa {
  margin: 52px auto;
  width: 270px;
}

.kevalusop-vegas {
cursor: pointer;
display: inline-block;
width: 242px;
padding: 20px 58px;
margin: 0px;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
font-style: normal;
font-weight: 700;
font-size: 16px;
letter-spacing: .05px;
line-height: normal;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.kevalusop-vegas.pervaya {
color: #FFF;
text-shadow: 0 -1px #8E74C5;
border: 0;
background-color: #A287D4;
-webkit-box-shadow: inset 0 1px #C0AEE1,inset 0 -1px #6F5EA1,0 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px #c0aee1,inset 0 -1px #6f5ea1,0 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px #C0AEE1,inset 0 -1px #6F5EA1,0 1px rgba(0, 0, 0, 0.1);
}

.kevalusop-vegas.vtoraya {
color: #FFF;
text-shadow: 0 -1px #8E74C5;
border: 0;
background-color: #A287D4;
box-shadow: inset 0 -1px #9479C9,0 1px 2px #E1E4E8;
-webkit-box-shadow: inset 0 -1px #9479C9,0 1px 2px #E1E4E8;
-moz-box-shadow: inset 0 -1px #9479c9,0 1px 2px #e1e4e8;
}

.kevalusop-vegas.third {
color: #FFF;
text-shadow: 0 -1px #8E74C5;
border: 3px solid;
border-color: #FFF;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

.kevalusop-vegas.fourth {
color: #FFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border: 3px solid;
border-color: #5676cf;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: #5684E0;
}

.kevalusop-vegas.fifth {
color: #FFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #2480AC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #1198C3;
background: -moz-linear-gradient(top, rgba(44, 166, 207, 1) 0%, rgba(2, 141, 184, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44, 166, 207, 1)), color-stop(100%,rgba(2, 141, 184, 1)));
background: -webkit-linear-gradient(top, rgba(44, 166, 207, 1) 0%,rgba(2, 141, 184, 1) 100%);
background: -o-linear-gradient(top, rgba(44, 166, 207, 1) 0%,rgba(2, 141, 184, 1) 100%);
background: -ms-linear-gradient(top, rgba(44, 166, 207, 1) 0%,rgba(2, 141, 184, 1) 100%);
background: linear-gradient(to bottom, rgba(44, 166, 207, 1) 0%,rgba(2, 141, 184, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca6cf', endColorstr='#028db8',GradientType=0 );
-webkit-box-shadow: 0 1px 6px rgba(5, 98, 130, 0.59), inset 0 1px 0 rgba(122, 219, 253, 0.55);
-moz-box-shadow: 0 1px 6px rgba(5,98,130,0.59), inset 0 1px 0 rgba(122,219,253,0.55);
box-shadow: 0 1px 6px rgba(5, 98, 130, 0.59), inset 0 1px 0 rgba(122, 219, 253, 0.55);
overflow: hidden;
}

.kevalusop-vegas.shestaya {
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
border: 1px solid #2480AC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #FA7964;
background-image: -webkit-linear-gradient(top, #FA7964, #F26851);
background-image: linear-gradient(to bottom, #FA7964, #F26851);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 -12px 20px -10px rgba(255, 255, 255, 0) inset;
-webkit-transition: box-shadow 0.25s ease, text-shadow 0.2s ease;
transition: box-shadow 0.25s ease, text-shadow 0.2s ease;
}

.kevalusop-vegas.pyataya {
display: inline-block;
color: #FFF;
background-color: #D75C51;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
padding: 18px 25px 18px 25px;
}

.kevalusop-vegas.vertaya {
display: inline-block;
color: #FFF;
background-color: #D75C51;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
border: 1px solid;
border-color: #b24c45;
-webkit-box-shadow: 0 1px 0 rgba(23, 36, 45, 0.9);
-moz-box-shadow: 0 1px 0 rgba(23,36,45,0.9);
box-shadow: 0 3px 0 rgba(178, 76, 69, 0.9);
padding: 18px 25px 18px 25px;
}

.kevalusop-vegas.chetve {
color: #FFF;
background-color: #E74C3C;
text-shadow: 0 1px 1px rgba(170, 26, 43, 0.75);
border: 1px solid #b24c45;
-webkit-box-shadow: 0 1px 0 rgba(23, 36, 45, 0.9);
-moz-box-shadow: 0 1px 0 rgba(23,36,45,0.9);
box-shadow: 0 3px 0 rgba(178, 76, 69, 0.9);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 18px 25px 18px 25px;

}

/* ---------- BUTTON HOVER ---------- */

.kevalusop-vegas.pervaya:hover {
background-color: #A98FDA;
background-image: -moz-linear-gradient(top,#AF97DE,#A084D4);
background-image: -ms-linear-gradient(top,#AF97DE,#A084D4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#AF97DE),to(#A084D4));
background-image: -webkit-linear-gradient(top,#AF97DE,#A084D4);
background-image: -o-linear-gradient(top,#AF97DE 0,#A084D4 0);
background-image: linear-gradient(top,#AF97DE 0,#A084D4 0);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#af97de',endColorstr='#a084d4',GradientType=0);
background-repeat: repeat-x;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.vtoraya:hover {
background-color: #A98FDA;
background-image: -moz-linear-gradient(top,#AF97DE,#A084D4);
background-image: -ms-linear-gradient(top,#AF97DE,#A084D4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#AF97DE),to(#A084D4));
background-image: -webkit-linear-gradient(top,#AF97DE,#A084D4);
background-image: -o-linear-gradient(top,#AF97DE 0,#A084D4 0);
background-image: linear-gradient(top,#AF97DE 0,#A084D4 0);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#af97de',endColorstr='#a084d4',GradientType=0);
background-repeat: repeat-x;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.third:hover {
color: #000000;
background-color: rgba(0, 0, 0, 0.1);
border-color: #000000;
text-shadow: npervaya;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.fourth:hover {
color: #E0E3EC;
border-color: #E0E3EC;
text-shadow: npervaya;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.fifth:hover {
background: #1198C3;
background: -moz-linear-gradient(top, rgba(2, 141, 184, 1) 0%, rgba(44, 166, 207, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(2, 141, 184, 1)), color-stop(100%,rgba(44, 166, 207, 1)));
background: -webkit-linear-gradient(top, rgba(2, 141, 184, 1) 0%, rgba(44, 166, 207, 1) 100%);
background: -o-linear-gradient(top, rgba(2, 141, 184, 1) 0%, rgba(44, 166, 207, 1) 100%);
background: -ms-linear-gradient(top, rgba(2, 141, 184, 1) 0%, rgba(44, 166, 207, 1) 100%);
background: linear-gradient(to bottom, rgba(2, 141, 184, 1) 0%, rgba(44, 166, 207, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca6cf', endColorstr='#028db8',GradientType=0 );
background-repeat: repeat-x;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.shestaya:hover {
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(0, 0, 0, 0.17), 0 1px 6px 1px rgba(0, 0, 0, 0.3), 0 63px 120px -38px rgba(255, 255, 255, 0.2) inset;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.pyataya:hover {
background-color: #D45045;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.vertaya:hover {
background-color: #D45045;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas.chetve:hover {
background-color: #2E373F;
border: 1px solid #2E373F;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

.kevalusop-vegas:active {
background-color: #2c3e50;
}

Все кнопки, показанные здесь, могут масштабироваться в соответствии с атрибутом font-size и должны работать в любом относительно недавнем браузере.

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

16 Сентября 2021 Загрузок: 2 Просмотров: 779 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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