Добро пожаловать в наше сообщество!
skripters.net - небольшой форум для вэб-мастеров на котором вам предоставляется широкий выбор скриптов, плагинов, стилей и много чего еще для запуска собственного проекта: интернет-магазина, форума, корпоративного сайта, продающего лендинга. Здесь вы найдете много решений по заработку в интернет. Сможете продать или купить нужное вам решение для старта своего веб-проекта. Опытные пользователи проконсультируют вас если вы вначале пути, подскажут как лучше, помогут в установке и настройке.
1. Для регистрации доступна только одна почтовая служба - GMAIL
2. Если после регистрации вы не получили письмо - проверьте папку СПАМ

Скачать Импульсный эффект CSS вокруг кнопки

ⓜⓨⓤⓢⓛⓘ

Модератор
Developer
Регист
21 Май 2018
Сообщения
660
Реакции
668
36530494.jpg

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

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

Проверяя на работоспособность:

При открытии страницы на сайте;

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

Установочный процесс:

HTML:
<div id="navigavekons"><div id="navigavekonsMain"></div></div>

CSS:
#navigavekons {
  position:fixed;
  right: 50px;
  bottom: 50px;
  width:70px;
  height:70px;
  cursor:pointer;
  opacity:0.7;
  z-index:99990;
}

#navigavekons #navigavekonsMain {
  -moz-border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  border-radius: 50% !important;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgb(11, 146, 90);
  width: 75px;
  height: 75px;
  -webkit-animation: zcwmini 1.5s 0s ease-out infinite;
  -moz-animation: zcwmini 1.5s 0s ease-out infinite;
  animation: zcwmini 1.5s 0s ease-out infinite;
  border: 1px solid #9ddeb6;
}

#navigavekons #navigavekonsMain:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background-image:url("http://zornet.ru/ABVUN/Aba/mini.png");
  background-repeat:no-repeat;
  background-position:center center;
  -webkit-animation: zcwphone 1.5s linear infinite;
  -moz-animation: zcwphone 1.5s linear infinite;
  animation: zcwphone 1.5s linear infinite;
  
}

#navigavekons:hover {
  opacity:0.8;
}

#navigavekons:hover #navigavekonsMain {
  -webkit-animation:zcwmini2 1s 0.4s ease-out infinite;
  -moz-animation: zcwmini2 1s 0.4s ease-out infinite;
  animation: zcwmini2 1s 0.4s ease-out infinite;
}

#navigavekons:hover #navigavekonsMain:before {
  -webkit-animation: zcwphone2 1s linear infinite;
  -moz-animation: zcwphone2 1s linear infinite;
  animation: zcwphone2 1s linear infinite;
}

@-webkit-keyframes zcwphone {
  0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}
  50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}
  100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

@-webkit-keyframes zcwmini {
  0% {box-shadow: 0 0 8px 6px rgba(0,176,103, 0), 0 0 0 0 rgba(0,0,0,0), 0 0 0 0 rgba(0,176,103, 0);}
  10% {box-shadow: 0 0 8px 6px rgba(9, 109, 28), 0 0 12px 10px rgba(0,0,0,0), 0 0 0 0 rgba(19, 204, 91);}
  100% {box-shadow: 0 0 8px 6px rgba(0,176,103, 0), 0 0 0 40px rgba(0,0,0,0), 0 0 0 40px rgba(136, 249, 180);}
}

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

 
Сверху