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

Примеры CSS кнопок с hover эффектами

Вы ищете красивые и оригинальные кнопки для сайта на чистом CSS, плюс стильная анимация при наведении курсора, то этот материалом явно для вас. Для вас есть несколько кнопок CSS3, которые достаточно хороши для использования в реальных проектах веб-сайтов. Что безусловно вам могут понравиться, так как в этой подборке идут различные по стилистике кнопки в своем дизайне, где закреплена анимация.

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

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

Красивые HTML кнопки с анимацией CSS

Hover Glow Effect

HTML

Код

<button class="beauvaul-kimations" type="button">НАВЕДИТЕ КУРСОР</button>

CSS

Код

.beauvaul-kimations {
  width: 235px;
  height: 50px;
  border: none;
  outline: none;
  color: #f7eded;
  background: #1d1b1b;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.beauvaul-kimations:before {
  content: '';
  background: linear-gradient(45deg, #f90d0d, #e46c09, #ece909, #4bef0a, #12f1cc, #1338f3, #7510e4, #ec0dbc, #ef0808);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.beauvaul-kimations:active {
  color: #000
}

.beauvaul-kimations:active:after {
  background: transparent;
}

.beauvaul-kimations:hover:before {
  opacity: 1;
}

.beauvaul-kimations:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

На этом установка закончена.

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

3D Touch

HTML

Код

<div ontouchstart="">
  <div class="buvekablon">
  <a href="#">Наводи курсор для клика</a>
  </div>
</div>

CSS

Код

.buvekablon{
  position:relative;
  display:inline-block;
  margin:20px;
}

.buvekablon a{
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:36px;
  text-align: center;
  text-decoration:none;
  background-color:#FFA12B;
  display:block;
  position:relative;
  padding:20px 40px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);

  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buvekablon a:active{
  top:10px;
  background-color:#F78900;

  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}

.buvekablon:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Эта кнопка имеет эффект при клике на основу.

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

Кнопки значков

Здесь с кнопками идет шрифтовые иконки

Код

HTML

Код

<button class="knopavdan knopavdan-1 knopavdan-sep icon-info">Первая</button>
<button class="knopavdan knopavdan-2 knopavdan-sep icon-cart">Вторая</button>
<button class="knopavdan knopavdan-3 knopavdan-sep icon-heart">Третья</button>
<button class="knopavdan knopavdan-4 knopavdan-sep icon-send">Четвертая</button>

CSS

Код

.knopavdan {
  border: none;
  font-family: 'Lato';
  font-size: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.knopavdan:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */
.knopavdan:before {
  font-family: 'FontAwesome';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Icon separator */
.knopavdan-sep {
  padding: 25px 60px 25px 120px;
}

.knopavdan-sep:before {
  background: rgba(0,0,0,0.15);
}

/* Button 1 */
.knopavdan-1 {
  background: #3498db;
  color: #fff;
}

.knopavdan-1:hover {
  background: #2980b9;
}

.knopavdan-1:active {
  background: #2980b9;
  top: 2px;
}

.knopavdan-1:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

/* Button 2 */
.knopavdan-2 {
  background: #2ecc71;
  color: #fff;
}

.knopavdan-2:hover {
  background: #27ae60;
}

.knopavdan-2:active {
  background: #27ae60;
  top: 2px;
}

.knopavdan-2:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

/* Button 3 */
.knopavdan-3 {
  background: #e74c3c;
  color: #fff;
}

.knopavdan-3:hover {
  background: #c0392b;
}

.knopavdan-3:active {
  background: #c0392b;
  top: 2px;
}

.knopavdan-3:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

/* Button 3 */
.knopavdan-4 {
  background: #34495e;
  color: #fff;
}

.knopavdan-4:hover {
  background: #2c3e50;
}

.knopavdan-4:active {
  background: #2c3e50;
  top: 2px;
}

.knopavdan-4:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 3;
  font-size: 140%;
  width: 60px;
}

/* Icons */

.icon-cart:before {
  content: "\f07a";
}

.icon-heart:before {
  content: "\f55a";
}

.icon-info:before {
  content: "\f05a";
}

.icon-send:before {
  content: "\f1d8";
}

Также имеют отличную анимацию при клике на кнопку.

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

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

HTML

Код

<div class="container">
  <div class="center">
  <button class="btn">
  <svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
  <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
  <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
  </svg>
  <span>HOVER ME</span>
  </button>
  </div>
  </div>

CSS

Код

.container {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  width: 180px;
  height: 60px;
  position: absolute;
}

.btn {
  width: 180px;
  height: 60px;
  cursor: pointer;
  background: transparent;
  border: 1px solid #91C9FF;
  outline: none;
  transition: 1s ease-in-out;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}

.btn:hover {
  transition: 1s ease-in-out;
  background: #4F95DA;
}

.btn:hover svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: white;
  font-size: 18px;
  font-weight: 100;
}

Эффект состоит в том, что при наведении курсора идет анимация по всей кнопки.

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

Кнопка с пузырьками

Анимационная кнопка на сайт

HTML

Код

<button style="--content: 'Hover me!';"href="/">
  <div class="left"></div>
  Hover me!
  <div class="right"></div>
</button>

CSS

Код

button {
  position:relative;
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;

  font-family: "Source Code Pro";
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;
  color: var(--text-color);

  background-color: var(--btn-color);
  box-shadow: var(--shadow-color) 2px 2px 22px;
  border-radius: 4px;
  z-index: 0;
  overflow: hidden;
}

button:focus {
  outline-color: transparent;
  box-shadow: var(--btn-color) 2px 2px 22px;
}

.right::after, button::after {
  content: var(--content);
  display: block;
  position: absolute;
  white-space: nowrap;
  padding: 40px 40px;
  pointer-events:none;
}

button::after{
  font-weight: 200;
  top: -30px;
  left: -20px;
}

.right, .left {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.right {
  left: 66%;
}
.left {
  right: 66%;
}
.right::after {
  top: -30px;
  left: calc(-66% - 20px);

  background-color: var(--bg-color);
  color:transparent;
  transition: transform .4s ease-out;
  transform: translate(0, -90%) rotate(0deg)
}

button:hover .right::after {
  transform: translate(0, -47%) rotate(0deg)
}

button .right:hover::after {
  transform: translate(0, -50%) rotate(-7deg)
}

button .left:hover ~ .right::after {
  transform: translate(0, -50%) rotate(7deg)
}

/* bubbles */
button::before {
  content: '';
  pointer-events: none;
  opacity: .6;
  background:
  radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
  radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
  radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
  from {
  transform: translate();
  }
  to {
  transform: translate(0, -66.666%);
  }
}

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

А говоря про крайний стиль, то там видим пузырики, что тематическое направление, которое связано с водой, то этот стиль станет отличным вариантом на сайте.

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

07 Ноября 2019 Просмотров: 3717 Комментариев: (0)

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

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

Kosten

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