три варианта кнопок с эффектом пульсации

 Приветствую вас, уважаемые читатели и гости блога.

Продолжаю подборку красивых кнопок для блога.  На этот раз сделаем пульсирующие кнопочки. Такие обязательно привлекут внимание посетителей.  Установить их можно и в самом сообщение, и в гаджет HTML/JAVAScript.  Это могут быть, какие-то объявления или переходы на другую станицу.Все предложенные варианты кнопок в работе можно посмотреть в этом редакторе. Просто скопируйте код у установите в поле на странице редактора

 1. Пульсирующая овальная кнопка

Код.

<div class="dingovaila-besticsia">
  <div class="vengumpn-koveemen"><a href="http://www.shpargalochki.ru/">Нажми на меня!</div>
</div>
<style>
.vengumpn-koveemen {
    display: flex;
    justify-content:
    align-items: center;
    width: 167px;
    height: 43px;
    color: #3e3e54;
    font-weight: bold;
    border: 1.1px solid #acafb7;
    background: #f7eded;
    border-radius: 80px;
    animation: radial-pulse 1s infinite;
    font-size: 20px;
}
.dingovaila-besticsia {
  width: 100%;
  height: 100vh;
  background-color: #328096;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(23, 22, 22, 0.5);
  }
  100% {
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
}
</style>

/div>

Я отметила цветом фон для большей выразительности. Можно эту строку в коде удалить.

2. Чёрная квадратная кнопка

Код

<div class="button"><h1>Кнопка</h1></div>
</div>
<style>
.button{
width: 150px;
    padding: 5px 0;
    margin: 30px auto 0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: rgba(41, 41, 41, 0.88);
    color: #e6a833;
    -webkit-animation-name: 'play_down';
    -moz-animation-name: 'play_up';
    animation-duration: 1s;
    animation-iteration-count: infinite;
    box-shadow: 0 0 0 3px rgba(0, 0, 0,.5);
    cursor: pointer;
}
@keyframes  play_top {
 0% 
 {
 -webkit-box-shadow: 0 0 rgba(0,163,182,.6);
 -moz-box-shadow: 0 0 rgba(0,163,182,.6);
 box-shadow: 0 0 rgba(0,163,182,.6);
 }
 to 
 {
 -webkit-box-shadow: 0 0 0 20px rgba(0,163,182,0);
 -moz-box-shadow: 0 0 0 20px rgba(0,163,182,0);
 box-shadow: 0 0 0 20px rgba(0,163,182,0);
 }   
}
@keyframes  play_down {
 0% 
 {
 -webkit-box-shadow: 0 0 rgba(55,55,55,.6);
 -moz-box-shadow: 0 0 rgba(55,55,55,.6);
 box-shadow: 0 0 rgba(55,55,55,.6); 
 }
 to 
 {
 -webkit-box-shadow: 0 0 0 20px rgba(55,55,55,0);
 -moz-box-shadow: 0 0 0 20px rgba(55,55,55,0);
 box-shadow: 0 0 0 20px rgba(55,55,55,0);  
 }
}
</style>

3. Маленькая круглая кнопка

Код 

 <div class="kigdsab-godeav"><button class="casetug-posavun"><a href="http://www.shpargalochki.ru/">тут</button></div>

<style> .kigdsab-godeav{

width:200px;

height:100%;

margin:0 auto 0}

.casetug-posavun {

  position: relative;

  top: 50%;

  left: 50%;

  margin-left: -32px;

  margin-top: -32px;

  display: block;

  width: 53px;

  height: 53px;

  font-size: 14px;

  font-weight: normal;

  color: #f5f0f0;

  text-shadow: 0 1px 0 #0f3354;

  border: 1px solid #1d71c1;

  box-shadow: 0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #98c4ec;

  border-radius: 100%;

  background: #62a8e8;

  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #6eace4), color-stop(100%, #4f93d4));

  background-image: -webkit-linear-gradient(#64a0d6, #3f86ca);

  background-image: linear-gradient(#66a3da, #3f88ce);

  cursor: pointer;

  -webkit-animation: pulse 1s infinite cubic-bezier(0.6, 0, 0, 1);

}

.casetug-posavun:hover{

-webkit-animation:none}

@-webkit-keyframes pulse{

to{

box-shadow:0 0 0 23px rgba(81, 147, 218, 0), inset 0 1px 0 #9ec3e6}

}</style>

Соответственно, чтобы сделать надписи на кнопках кликабельными в Дивах пишем так

<a href="http://www.shpargalochki.ru/">Текст</div>

Вставляем адрес страницы, куда будет переход по ссылке.

С цветом и размерами кнопок тоже можно поиграть во всех кодах. 

На сегодня всё. Хочется надеяться, что такие пульсирующие кнопки найдут применение на ваших блогах. До встречи.