Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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

Продолжаю подборку красивых кнопок для блога.  На этот раз сделаем пульсирующие кнопочки. Такие обязательно привлекут внимание посетителей.  Установить их можно и в самом сообщение, и в гаджет 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>


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

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

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



10 комментариев:

  1. Эффект пульсации - оно, конечно, интересно и заманчиво. Однако в последнее время, меня больше занимает пульсация на моём левом запястье.

    ОтветитьУдалить
  2. Это интересно, Виктория, но не знаю, где можно использовать эту кнопку.

    ОтветитьУдалить
  3. Ирина, да хоть где. Например конкурс просто название на кнопке сменить. Или мой блог, то же самое. И ссылку на страницу. на ту же карту сайта переход сделать по кнопке, чтобы в газа бросалось сразу.

    ОтветитьУдалить
  4. Ох, Виктория Батьковна! придется ИСКАТЬ место в блоге для такой красоты!!!!Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, ну ты приспособишь, ы не сомневаюсь даже.

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

    ОтветитьУдалить
  6. Девчата, да её хоть куда, на тоц же боковой панели. Вот примерчик на тестовом блоге сделалаhttps://bvpremera.blogspot.com/

    ОтветитьУдалить
  7. Да не. Кнопка, пульсация... Вульгарно очень! Это работало лет 20 назад, мне так кажется. Я думаю, что на сегодняшний день более органично и информативно будет смотреться небольшое всплывающее окно. Можно написать небольшой завлекательный текст, побудить к действию и т.д. Хотя, все зависит от задач и дизайна сайта, конечно)

    ОтветитьУдалить
  8. Алексей я Вас услышала. Всплывающие окна и кнопки абсолютно разные вещи. Смею заметить, что окна тоже прошлый век и сколько раз пользователи жаловались, что они раздражают буквально всех. У меня на блоге есть статьи про разные подобные окно. и сужу по мнению своих читателей. Впрочем, на вкус и цвет.... Ни кто ведь не заставляет устанавливать . Пусть каждый сам решает

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML