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

Hover-эффекты для кнопок на чистом CSS

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

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

Первая кнопка с бликом при нападение курсора:

Стильная кнопка для сайта на HTML+CSS

HTML

Код

<div class="knopoka">
  <div class="anuspaven">
  <a href="#" class="chistom kusadena" target="_blank"><span>ZORNET.RU</span></a>
  </div>
</div>

CSS

Код

.knopoka {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
/* padding: 2em 0em; */
}

.anuspaven {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #fffbfb;
  padding: 38px 0px;
  width: 252px;
}

.chistom {
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 45px;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}
.chistom:hover {
  text-decoration: none;
}

.kusadena {
  color: #f9f7f7;
  border: 4px solid #1d1d1d;
  box-shadow: 0px 0px 0px 1px #171717 inset;
  background-color: #171717;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.kusadena:hover {
  border: 4px solid #565353;
  background-color: #f3f1f1;
  box-shadow: 0px 0px 0px 4px #efeaea inset;
}

.kusadena span {
  transition: all 0.2s ease-out;
  z-index: 2;
}
.kusadena:hover span {
  letter-spacing: 0.13em;
  color: #232222;
}

.kusadena:after {
  background: #FFF;
  border: 0px solid #000;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .8;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  width: 50px;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);/*easeOutCirc*/
  z-index: 1;
}
.kusadena:hover:after {
  background: #fbfafa;
  border: 20px solid #131212;
  opacity: 0;
  left: 120%;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}

Установка завершена, как видим не чего сложного, так как все на стилистике выполнено.

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

Вторая кнопка с эффектом смены ключевых слов при наведении

Кнопки для сайтов с помощью CSS свойства

HTML

Код

<div class="meseamed">
  <div class="konteynedas">
  <a href="/" class="usmalan abesunis" data-sm-link-text="ZORNET.RU" target="_blank"><span>ПОРТАЛ</span></a>
  </div>
</div>

CSS

Код

.meseamed {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
/* padding: 2em 0em; */
}

.konteynedas {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #FFF;
  padding: 40px 0px;
  width: 240px;
}

.usmalan {
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 45px;
  max-width: 175px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

.usmalan:hover {
  text-decoration: none;
}

.abesunis {
  --uismLinkDisplay: var(--smLinkDisplay, inline-flex);
  display: var(--uismLinkDisplay);
  color: #1f1f1f;
  outline: solid 2px #151414;
  position: relative;
  transition-duration: 0.4s;
  overflow: hidden;
}

.abesunis::before,
.abesunis span{
  margin: 0 auto;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-duration: 0.4s;
}

.abesunis:hover {
  background-color: #1b1a1a;
}

.abesunis:hover span{
  -webkit-transform: translateY(-400%) scale(-0.1,20);
  transform: translateY(-400%) scale(-0.1,20);
}

.abesunis::before{
  content: attr(data-sm-link-text);
  color: #f7f5f5;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: translateY(500%) scale(-0.1,20);
  transform: translateY(500%) scale(-0.1,20);
}

.abesunis:hover::before{
  letter-spacing: 0.05em;
  -webkit-transform: translateY(0) scale(1,1);
  transform: translateY(0) scale(1,1);
}

По формату эта кнопка идентична первой, где только кардинально отличается основа эффекта.

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

На третей кнопки идет чисто эффект при наведение курсора

HTML

Код

<button>ZORNET.RU</button>

CSS

Код

body:before{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
button {
  background: #099474;
  color: #f9f2f2;
  border: none;
  position: relative;
  height: 74px;
  font-size: 23px;
  padding: 25px;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
}
button:hover {
  background: #f5f3f3;
  color: #0e9879;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #0da784;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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