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

Анимированный блик для кнопок на CSS3

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

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

Желтая кнопка с анимированной вспышкой объектива.

HTML

Код

<a href='#' class='preview-block__btn custom-btn'>Glare Button</a>

CSS

Код

.preview-block__btn {
  max-width: 350px;
  margin-top: 35px;
}

.custom-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 58px;
  padding-top: 2px;
  border: none;
  border-bottom: 2px solid #beb038;
  position: relative;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  background: #f3d429;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s;
}
.custom-btn:after {
  content: '';
  display: block;
  width: 30px;
  height: 300px;
  margin-left: 60px;
  background: #fff;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
  position: absolute;
  left: -40px;
  top: -150px;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  -webkit-animation-name: slideme;
  animation-name: slideme;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes slideme {
  0% { left: -30px; margin-left: 0px; }
  30% { left: 110%; margin-left: 80px; }
  100% { left: 110%; margin-left: 80px; }
}

На этом установка завершена.

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

Серая анимированная кнопка с бликами

HTML

Код

<a href="#" class="button">

ZORNET.RU
</a>

CSS

Код

a.button {
  width: 200px;
  height: 50px;
  background: #333;
  display: block;
  position: relative;
  margin: 50px auto 0;
  overflow: hidden;
  border: 1px solid #333333;
  color: white;
  text-decoration: none;

  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
  box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;


  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;

  background-image: -webkit-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
  background-image: -moz-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
  background-image: -ms-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
  background-image: -o-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
  background-image: linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
}
a.button span.text {
  position: absolute;
  top: 17px;
  left: 65px;
  font: 15px Arial;
}
a.button span.shine {
  content: "";
  position: absolute;
  height: 400px;
  width: 20px;
  background: white;
  top: -80px;
  left: -20px;
  display: block;
  opacity: 0.8;

  -webkit-box-shadow: 0px 0px 20px 10px white;
  -moz-box-shadow: 0px 0px 20px 10px white;
  box-shadow: 0px 0px 20px 10px white;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
a.button:hover {
  -webkit-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
  box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
}
a.button:active {
  -webkit-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
  -moz-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
  box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
}
a.button:hover span.shine {
  left: 170px;
  top: -300px;
}

На этом установка завешена.

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

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

HTML

Код

<a href="#" class="icon">Первая</a>
<a href="#" class="icon">Вторая</a>
<a href="#" class="icon">Третья</a>

CSS

Код

.icon {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}
.icon:nth-child(1) {
  background: cornflowerblue;
}
.icon:nth-child(2) {
  background: salmon;
}
.icon:nth-child(3) {
  background: gray;
}
/**
  * The "shine" element
  */

.icon:after {
  content: "";
  height: 200%;
  left: -230%;
  opacity: 0;
  position: absolute;
  top: -20%;
  transform: rotate(-30deg);
  width: 200%;
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
/* Hover state - trigger effect */

.icon:hover:after {
  left: -50%;
  opacity: 1;
  top: -50%;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-property: left, top, opacity;
  transition-timing-function: ease;
}
/* Active state */

.icon:active:after {
  opacity: 0;
}

Здесь один эффект блика представлен под разную гамму цвета.

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

09 Сентября 2020 Загрузок: 1 Просмотров: 3108 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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