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

Набор из 5 эффектов для кнопок на CSS

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

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

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

Это общий стиль для всех кнопок, который идет на дизайн.

CSS

Код

.dekitus {
  padding: 14px 65px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none !important;
  font-size: 18px;
  border-radius: 3px;
}

Здесь его добавляем первым в CSS и потом уже выбранный вами вариант стилей.

1. Пульсирующий эффект

Здесь при наведение на кнопку происходит пульс, как волны идут, что красиво смотрится.

красивая анимация кнопок для сайта с различными эффектами

красивая анимация кнопок для сайта с различными эффектами

HTML

Код

<a href="" class="dekitus kudovas"><div class="lasetub"></div>КНОПКА</a>

CSS

Код

.kudovas {
  position: relative;
  z-index: 0;
  background-color: #3169d1;
  color: #fff !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.lasetub {
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.lasetub:before {
  position: relative;
  content: '';
  display: block;
  margin-top: 100%;
}
.lasetub:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}
.kudovas:hover > .lasetub {
  -moz-animation: anim-out 0.75s;
  -webkit-animation: anim-out 0.75s;
  animation: anim-out 0.75s;
}
.kudovas:hover > .lasetub:after {
  -moz-animation: anim-out-pseudo 0.75s;
  -webkit-animation: anim-out-pseudo 0.75s;
  animation: anim-out-pseudo 0.75s;
}
@-webkit-keyframes anim-out {
  0% {
  width: 0%;
  }
  100% {
  width: 100%;
  }
}
@-moz-keyframes anim-out {
  0% {
  width: 0%;
  }
  100% {
  width: 100%;
  }
}
@-ms-keyframes anim-out {
  0% {
  width: 0%;
  }
  100% {
  width: 100%;
  }
}
@keyframes anim-out {
  0% {
  width: 0%;
  }
  100% {
  width: 100%;
  }
}
@-webkit-keyframes anim-out-pseudo {
  0% {
  background: rgba(0, 0, 0, 0.25);
  }
  100% {
  background: transparent;
  }
}
@-moz-keyframes anim-out-pseudo {
  0% {
  background: rgba(0, 0, 0, 0.25);
  }
  100% {
  background: transparent;
  }
}
@-ms-keyframes anim-out-pseudo {
  0% {
  background: rgba(0, 0, 0, 0.25);
  }
  100% {
  background: transparent;
  }
}
@keyframes anim-out-pseudo {
  0% {
  background: rgba(0, 0, 0, 0.25);
  }
  100% {
  background: transparent;
  }
}

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

2. Трехмерная кнопка

Кнопка которая создана в 3d и имеет красивый эффект нажатие.

Эти кнопки обладают некоторыми потрясающими эффектами

Эти кнопки обладают некоторыми потрясающими эффектами

HTML

Код

<a href="" class="dekitus kelopes">КНОПКА 2</a>

CSS

Код

.kelopes {
  background-color: #3169d1;
  color: #fff !important;
  margin: 0 0 10px 0;
  box-shadow: 0 5px #3B4BA8;
}
.kelopes:hover {
  -ms-transform: translateY(5px);
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  border-bottom: none;
  box-shadow: none;
}

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

3. Поменяйте местами левый и правый цвета с помощью слайд

Происходит перелив градиентов, что на светлом или темном сайте отлично смотрится.

Красивые CSS3 кнопки с анимацией и hover эффектами

Красивые CSS3 кнопки с анимацией и hover эффектами

HTML

Код

<a href="" class="dekitus asetuged">КНОПКА 3</a>

CSS

Код

.asetuged {
  background-image: linear-gradient(to right, #3169d1 0%, #998bfa 51%, #3169d1 100%);
  color: #fff !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  background-size: 200% auto;
}
.asetuged:hover {
  background-color: #998bfa;
  background-position: right center;
}

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

4. Изменение градации со стороны

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

hover анимация для ваших кнопок

HTML

Код

<a href="" class="dekitus kabuteg">КНОПКА 4</a>

CSS

Код

.kabuteg {
  background: transparent;
  color: #3169d1 !important;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  background: -webkit-linear-gradient(180deg, rgba(34, 87, 185, 0.8), rgba(113, 165, 245, 0.8), rgba(205, 200, 252, 0), rgba(205, 200, 252, 0));
  background: -webkit-linear-gradient(right, rgba(36, 94, 202, 0.8), rgba(150, 188, 247, 0.8), rgba(197, 193, 234, 0), rgba(199, 195, 232, 0));
  background: linear-gradient(270deg, rgba(40, 92, 189, 0.8), rgba(148, 179, 228, 0.8), rgba(185, 180, 232, 0), rgba(205, 200, 252, 0));
  background-position: 1% 50%;
  background-size: 300% 300%;
  border: none;
  border: 1px solid #4074d4;
}
.kabuteg:hover {
  background-position: 99% 50%;
  color: #fff !important;
  border: 1px solid rgba(205, 200, 252, 0);
}

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

5. Поменяйте местами верхний и нижний цвета с помощью кнопки градации

HTML

Готовые кнопки для сайта css

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

Код

<a href="" class="dekitus masepud">КНОПКА 5</a>

CSS

Код

.masepud {
  color: #e8e8e8 !important;
  background-image: -webkit-linear-gradient(#255bbf 0%, #7d6ee0 100%);
  background-image: linear-gradient(#1e58c3 0%, #ada2fb 100%);
  box-shadow: 0px 2px 2px rgba(62, 59, 59, 0.29);
  margin: 0 0 10px 0;
}
.masepud:hover {
  background-image: -webkit-linear-gradient(#998bfa 0%, #3169d1 100%);
  background-image: linear-gradient(#998bfa 0%, #3169d1 100%);
}

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

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

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

05 Июня 2019 Просмотров: 1456 Комментариев: (0)

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

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

Kosten

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