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

Привлекательные кнопки с использование CSS

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

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

Небольшая подборка кнопок с разным эффектом при наведение:

Установочный процесс:

HTML

Код

<div class="container_odd">
  <div class="set_container"> <a href="#" class="venges-kacun kusaganud-1"> <svg>
  <rect width="100%" height="100%"></rect>
  </svg> Zornet.Ru #1 </a>
  
  <a href="#" class="venges-kacun kusaganud-2">Zornet.Ru</a>
  

  <a href="#" class="venges-kacun kusaganud-3"> <svg>
  <rect width="100%" height="100%"></rect>
  </svg> Zornet.Ru #3 </a>
  

  <a href="#" class="venges-kacun kusaganud-4">Zornet.Ru #1</a>
  
  <div style="clear:both"></div>
  </div>
  </div>

CSS

Код

.venges-kacun {
  color: #353232;
  cursor: pointer;
  display: block;
  font-size: 15px;
  font-weight: 400;
  line-height: 45px;
  margin-right: 2em;
  text-align: center;
  max-width: 185px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}
.venges-kacun:hover {
  text-decoration: none;
}
.kusaganud-1 {
  background:transparent;
  text-align: center;
  float:left;
}
.kusaganud-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.kusaganud-1 rect {
  fill: none;
  stroke: #e1b700;
  stroke-width: 3;
  stroke-dasharray: 422, 0;
  transition: all 450ms linear 0s;
}
.kusaganud-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear 0s;
}
.kusaganud-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);
}
.kusaganud-2 {
  letter-spacing: 0;
  transition: all 150ms linear 0s;
  float:left;
}
.kusaganud-2:hover, .kusaganud-2:active {
  letter-spacing: 5px;
  transition: all 150ms linear 0s;
}
.kusaganud-2:after, .kusaganud-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;
}
.kusaganud-2:hover:after, .kusaganud-2:hover:before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-color: #2494ce;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 350ms ease-in-out;
  width: 70%;
}
.kusaganud-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

.kusaganud-3 {
  background:transparent;
  text-align: center;
  float:left;
}
.kusaganud-3 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.kusaganud-3 rect {
  fill: none;
  stroke: #a03717;
  stroke-width: 3;
  stroke-dasharray: 422, 0;
  transition: all 450ms linear 0s;
}
.kusaganud-3:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear 0s;
}
.kusaganud-3: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);
}

.kusaganud-4 {
  letter-spacing: 0;
  transition: all 150ms linear 0s;
  float:left;
}
.kusaganud-4:hover, .kusaganud-4:active {
  letter-spacing: 5px;
  transition: all 150ms linear 0s;
}
.kusaganud-4:after, .kusaganud-4: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 295ms ease-in-out;
  transition: all 295ms ease-in-out;
  width: 0;
}
.kusaganud-4:hover:after, .kusaganud-4:hover:before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-color: #635e5e;
  -webkit-transition: width 350ms ease-in-out;
  transition: width 375ms ease-in-out;
  width: 75%;
}
.kusaganud-4:hover:before {
  bottom: auto;
  top: 0;
  width: 75%;
}

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

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

Весь задействованный эффект, который можно наблюдать на demo странице, то он полностью задействован в использовании CSS свойств. Где также присутствует анимацию границ, эффекты перехода границ и трансформации.

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

Источник: css3transition.com

28 Января 2020 Загрузок: 1 Просмотров: 848 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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