5 симпатичных эффектов при наведении на кнопку

Всегда хочется, чтобы кнопка на сайте имела какой-то эффект, была необычной, бросалась в глаза. Сегодня мы реализуем пять кнопок с эффектами при наведении на них.

Первый вариант кнопки

HTML

<a href="#" class="btn">
  <svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
  </svg>
  Hover
</a>

CSS

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  background: #e02c26;
  font-weight: 100;
}

.btn:hover {
  text-decoration: none;
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}

.btn svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.btn rect {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  transition: all 0.35s linear;
}

.btn:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

Второй вариант кнопки

HTML

<a href="#" class="btn">Hover</a>

CSS

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  letter-spacing: 0;
}

.btn:hover,
.btn:active {
  letter-spacing: 5px;
  text-decoration: none;
}

.btn:after,
.btn:before {
	backface-visibility: hidden;
	border: 1px solid rgba(255, 255, 255, 0);
	bottom: 0px;
	content: " ";
	display: block;
	margin: 0 auto;
	position: relative;
	transition: all 280ms ease-in-out;
	width: 0;
}

.btn:hover:after,
.btn:hover:before {
	backface-visibility: hidden;
	border-color: #fff;
	transition: width 350ms ease-in-out;
	width: 70%;
}

.btn:hover:before {
	bottom: auto;
	top: 0;
	width: 70%;
}

Третий вариант кнопки

HTML

<a href="#" class="btn">Hover</a>

CSS

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear;
}

.btn:hover {
  text-decoration: none;
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-shadow: -1px -1px 0 #c2211c;
  transition: all 250ms linear;
}

Четвертый вариант кнопки

HTML

<a href="#" class="btn"><span>Hover</span></a>

CSS

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  border: 1px solid;
  overflow: hidden;
}

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

.btn span {
  z-index: 20;
}

.btn:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

Чтобы изменить время анимации блика, поменяйте значение у .btn:after и .btn:hover:after transition: all {свое значение} cubic-bezier(0.19, 1, 0.22, 1);

Пятый вариант кнопки

HTML

<a href="#" class="btn">Hover</a>

CSS

.btn {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover {
  text-decoration: none;
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

Заключение

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

Источник
Оцените статью
( Пока оценок нет )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий