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

Эффекты кнопок CSS с наведением клика

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

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

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

Кнопка с красивым эффектом при наведение клика

CSS

Код

<div id="sedamiben">
  <div class="maginem_kexcemen">
  <a href="/" class="nemebe"><span>Скрипты</span></a>
  <a href="/" class="conumed">Шаблоны</a>
  <a href="/" class="cepuendas">Дизайн</a>
  <a href="/" class="cedevud_sentua"><span>Контакт</span></a>
  <a href="/" class="asegoduce">Стили</a>
  </div>
</div>

HTML

Код

#sedamiben {
  height: 100%;
}

.maginem_kexcemen {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

a {
  display: block;
  margin: 0 5px;
  padding: 14px 0;
  width: 130px;
  font-weight: bold;
  color: #e8e5e5;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: .2s ease-in-out;
}

a:active {
  background: rgba(243, 239, 239, 0.5);
}

.nemebe:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #f9f6f6;
  position: absolute;
  top: -1px;
  right: 0;
  transition: .1s ease-in-out .1s;
}

.nemebe:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #f9f6f6;
  position: absolute;
  bottom: 0;
  right: -1px;
  transition: .1s ease-in-out .2s;
}

.nemebe span:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #f9f6f6;
  position: absolute;
  bottom: -1px;
  left: 0;
  transition: .1s ease-in-out .3s;
}

.nemebe span:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #f9f6f6;
  position: absolute;
  top: 0;
  left: -1px;
  transition: .1s ease-in-out;
}

.nemebe:hover span:after {
  height: 0;
}

.nemebe:hover:before {
  width: 0;
}

.nemebe:hover:after {
  height: 0;
}

.nemebe:hover span:before {
  height: 5px;
}

.conumed {
  border: 1px solid #f9f6f6;
  overflow: hidden;
}

.conumed:before {
  content: "";
  width: 200%;
  height: 200%;
  background: rgba(243, 237, 237, 0.2);
  transform: rotate(-45deg);
  position: absolute;
  top: -10%;
  left: -180%;
  transition: .3s ease-in-out;
}

.conumed:hover:before {
  left: 60%;
}

.conumed {
  border: 1px solid #f7eaea;
  overflow: hidden;
}

.cepuendas {
  border: 1px solid #f7f2f2;
  overflow: hidden;
  transition: none;
}

.cepuendas:hover {
  transform: rotateX(360deg);
  transition: .8s ease-in-out;
}

.cedevud_sentua {
  border: 1px solid #f7f2f2;
  overflow: hidden;
}

.cedevud_sentua:hover span {
  display: block;
  transform: rotateY(360deg);
  transition: .8s ease-in-out;
}

.asegoduce {
  text-indent: -9999em;
}

.asegoduce:before {
  content: "Стили";
  padding-top: 15px;
  width: 100%;
  height: 100%;
  color: #f7f5f5;
  text-indent: 0;
  background: #b40094;
  box-sizing: border-box;
  box-shadow: 10px 10px 0 #710b82;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  transition: .2s ease-in-out;
}

.asegoduce:hover:before {
  top: 0;
  left: 0;
  box-shadow: 0 0 0 #90001c;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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