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

Примеры анимированных кнопок на CSS

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

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

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

Здесь идут классы и стили на эффекты для кнопок:

HTML

Код

<div class="suled knopka-top">Сверху</div>
<div class="suled knopka-left">С лево</div>
<div class="suled knopka-right">С право</div>
<div class="suled knopka-center">По центру</div>
<div class="suled knopka-bottom">Стиль кнопки</div>

CSS

Код

.suled {
  position: relative;
  padding: 2rem 5rem;
  padding-right: 3.1rem;
  font-size: 1.3rem;
  color: #f5efef;
  letter-spacing: 1.1rem;
  text-transform: uppercase;
  transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
  cursor: pointer;
  user-select: none;
}

.suled:before, .suled:after {
  content: '';
  position: absolute;
  transition: inherit;
  z-index: -1;
}

.suled:hover {
  color: var(--def);
  transition-delay: .5s;
}

.suled:hover:before {
  transition-delay: 0s;
}

.suled:hover:after {
  background: var(--inv);
  transition-delay: .35s;
}

/* knopka Top */
.knopka-top:before,
.knopka-top:after {
  left: 0;
  height: 0;
  width: 100%;
}

.knopka-top:before {
  bottom: 0;
  border: 1px solid var(--inv);
  border-top: 0;
  border-bottom: 0;
}

.knopka-top:after {
  top: 0;
  height: 0;
}

.knopka-top:hover:before,
.knopka-top:hover:after {
  height: 100%;
}

/* knopka Left */
.knopka-left:before,
.knopka-left:after {
  top: 0;
  width: 0;
  height: 100%;
}

.knopka-left:before {
  right: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.knopka-left:after {
  left: 0;
}

.knopka-left:hover:before,
.knopka-left:hover:after {
  width: 100%;
}

/* knopka Right */

.knopka-right:before,
.knopka-right:after {
  top: 0;
  width: 0;
  height: 100%;
}

.knopka-right:before {
  left: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.knopka-right:after {
  right: 0;
}

.knopka-right:hover:before,
.knopka-right:hover:after {
  width: 100%;
}

/* knopka center */

.knopka-center:before {
  top: 0;
  left: 50%;
  height: 100%;
  width: 0;
  border: 1px solid var(--inv);
  border-left: 0;
  border-right: 0;
}

.knopka-center:after {
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: var(--inv);
}

.knopka-center:hover:before {
  left: 0;
  width: 100%;
}

.knopka-center:hover:after {
  top: 0;
  height: 100%;
}

/* knopka Bottom */

.knopka-bottom:before,
.knopka-bottom:after {
  left: 0;
  height: 0;
  width: 100%;
}

.knopka-bottom:before {
  top: 0;
  border: 1px solid var(--inv);
  border-top: 0;
  border-bottom: 0;
}

.knopka-bottom:after {
  bottom: 0;
  height: 0;
}

.knopka-bottom:hover:before,
.knopka-bottom:hover:after {
  height: 100%;
}

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

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

31 Марта 2020 Загрузок: 1 Просмотров: 1056 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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