ZorNet.Ru — сайт для вебмастера » 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

Код

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. Вариант:

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

Код

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;
}

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

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

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

06 Июня 2020 Загрузок: 3 Просмотров: 974 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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