1

Как сделать мигающую кнопку на сайте? В начале страницы "получить доступ навсегда".

2 ответа 2

4

Покопавшись в исходниках, можно догадаться, что авторы сайта просто скопировали вот этот пример: https://codepen.io/oxla/pen/BRZjrY

Привожу его здесь по просьбе из комментариев

$('.ripplelink').each(function() {
    var $this = $(this);

    var ink, d, x, y;

    setInterval(function() {
        if($this.find(".ink").length === 0){
            $this.prepend("<span class='ink'></span>");
        }
             
        ink = $this.find(".ink");
        ink.removeClass("animate");
         
        if(!ink.height() && !ink.width()){
            d = Math.max($this.outerWidth(), $this.outerHeight());
            ink.css({height: d, width: d});
        }
         
        x = Math.round(Math.random()*ink.width() - ink.width()/2);
        y = Math.round(Math.random()*ink.height() - ink.height()/2);
         
        ink.css({top: y+'px', left: x+'px'}).addClass("animate");
    }, 3000)
});
.ibutton, a.ibutton {
    background: #fdd82a;
    font-family: 'Segoe UI', serif;
    padding: 12px 30px;
    color: #000000;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: auto;
    border: none;
    border-radius: 5px;
}
.ibutton:hover, .ibutton:focus {
    background: #fdc42a;
    text-decoration: none;
}


.ripplelink{
    opacity: 1;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.ripplelink .ink.animate{
    opacity: 1;
}
.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
  z-index: 20;
}
 
.animate {
    -webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="ibutton ripplelink" href="#"><span class="ink animate"></span>Написать сообщение</a>

2
  • Не гарантирую, что это первоисточник, откуда копировали авторы сайта, но решение там описано отлично
    – wirtwelt
    Commented 15 мар. 2018 в 6:24
  • код лучше в ответ вставить, через сниппет, следующая кнопка после вставки изображения. Commented 15 мар. 2018 в 15:53
4

.mig {
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  font-size: 1.2em;
  display: inline-block;
  animation: anim 2s ease infinite;
  font-weight: bold;
  text-decoration: none;
  color: white;
}

@keyframes anim {
  0% {
    background: red;
  }
  50% {
    background: blue;
  }
  100% {
    background: red;
  }
}
<a href="#" class="mig">Супер мигающая кнопка</a>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.