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

Кнопки с анимацией для сайта в HTML и CSS

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

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

1. Вариант:

Красивые кнопки для сайта

HTML

Код
<div id="atemnaya_otenok"><span class="gsanulpsa">ZorNet.Ru</span><div id="pereleska"></div></div>

CSS

Код
html {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2d3436;
  background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
}

#atemnaya_otenok {
  background: #222;
  height: 50px;
  min-width: 150px;
  border: none;
  border-radius: 10px;
  color: #eee;
  font-size: 40px;
  font-family: 'Cookie', cursive;
  position: relative;
  transition: 1s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-top: 5px;
}

#atemnaya_otenok #pereleska {
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  transition: 500ms;
}

.gsanulpsa {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#atemnaya_otenok:hover {
  background: transparent;
}

#atemnaya_otenok:hover #pereleska {
  height: 50px;
  width: 150px;
  left: 0;
  border-radius: 0;
  border-bottom: 2px solid #eee;
}

Установка заверена.

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

2. Вариант:

В уроке приведены примеры красивого оформления кнопок для сайта

HTML

Код
<div class="wrapper">
  <button><a href="#">
  <div class="scale rotate-4">S</div>
  <div class="scale rotate-2">l</div>
  <div class="scale rotate-3">i</div>
  <div class="scale rotate-1">m</div>
  <div class="scale rotate-2">e</div>
  </a></button>
</div>

CSS

Код
body {
  height: 100vh;
  background-color: #5d4257;
  background-image: linear-gradient(315deg, #5d4257 0%, #a5c7b7 74%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  height: 50px;
  width: 165px;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

button {
  height: 100%;
  width: 90%;
  cursor: pointer;
  background-color: #08e1ae;
  background-image: linear-gradient(315deg, #08e1ae 0%, #98de5b 74%);
  border: none;
  border-radius: 50px 50px 30px 30px;
  transition: 1s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

button a {
  font-family: 'Fredoka One', cursive;
  font-size: 30px;
  text-decoration: none;
  color: rgba(37, 61, 29, 0.7);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

button:hover {
  border-radius: 100px 100px 20px 20px;
  height: 45px;
  width: 165px;
}

button:hover .scale {
  letter-spacing: 5px;
  font-size: 25px;
  transition: 1s;
}

.rotate-1, .rotate-2, .rotate-3, .rotate-4 {
  transition: 1s;
}

button:hover .rotate-1 {
  transform: rotate(15deg);
}

button:hover .rotate-2 {
  transform: rotate(-15deg);
}

button:hover .rotate-3 {
  transform: rotate(10deg);
}

button:hover .rotate-4 {
  transform: rotate(-25deg);
}

button:active {
  filter: hue-rotate(90deg);
}

Эта кнопка имеет нестандартный эффект.

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

3. Вариант:

Buttons Основные стили кнопок CSS

HTML

Код
<button class="rainbow noselect">ZorNet.Ru</button>

CSS

Код
body {
  height: 100vh;
  overflow: hidden;
  background-color: #63a4ff;
  background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rainbow {
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-family: 'Parisienne', cursive;
  font-size: 30px;
  color: white;
  border: none;
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.6), inset -1px -1px 4px rgba(255,255,255,0.2);
  border-radius: 5px;
  background-color: #63a4ff;
  background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
  -webkit-tap-highlight-color: transparent;
}

.rainbow:hover {
  animation: rainbow 3s infinite linear;
}

@keyframes rainbow {
  to {
  filter: hue-rotate(360deg);
  }
}

.rainbow:focus {
  outline: none;
}

Весь процесс установки

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

4. Вариант:

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

HTML

Код
<div class="btn">
  <span class="noselect">ZorNet.Ru</span>
</div>

CSS

Код
.btn {
  width: 150px;
  height: 50px;
  border: 1px solid #333;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  transition: 1s;
}

.btn::before, .btn::after {
  position: absolute;
  background: #eee;
  z-index: -1;
  transition: 1s;
  content: '';
}

.btn::before {
  height: 50px;
  width: 130px;
}

.btn::after {
  width: 150px;
  height: 30px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:hover::before {
  width: 0px;
  background: #fff;
}

.btn:hover::after {
  height: 0px;
  background: #fff;
}

.btn:hover {
  background: #fff;
}

Здесь при наведении курсора меняется гамма цвета.

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

5. Вариант:

Анимация с помощью чистого CSS для кнопок

HTML

Код
<button id="neon" class="noselect">
  <span id="n">N</span>
  <span id="e">e</span>
  <span id="o">o</span>
  <span id="n2">n</span>
</button>

CSS

Код
body {
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #5e5368 74%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button {
  background: none;
  border: none;
  font-family: 'Warnes', cursive;
  color: #333;
  font-size: 30px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

span {
  margin: -6px;
  padding: 0;
}

#neon:hover span {
  animation: flicker 1s linear forwards;
}

#neon:hover #e {
  animation-delay: 200ms;
}

#neon:hover #o {
  animation-delay: 500ms;
}

#neon:hover #n2 {
  animation-delay: 600ms;
}

@keyframes flicker {
  0% {color: #333;}
  5%, 15%, 25% {
  color: #fff;
  text-shadow: 0px 0px 25px cyan;
  }
  10%, 20% {
  color: #333;
  text-shadow: none;
  }
   
  30% {
  color: #fff;
  text-shadow: 0px 0px 25px cyan;
  }
   
  100% {
  color: #fff;
  text-shadow: 0px 0px 25px cyan;
  }
}

#neon:focus {
  outline: none;
}

Красивый неон для темного формата сайта.

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

Теперь вы можете красиво оформить сайт или отдельную страницу, а просто выставить класс, который вызываем эффекты. Как можно заметить, что здесь только представлены классы, где под них написаны стили, а на некоторых несколько классов. Это все потому, что эта кнопка с более сложным и более оригинальный эффектом представлена.
2020-06-06 Загрузок: 2 Просмотров: 284 Комментарий: (0)

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

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

Оставь свой отзыв

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