Кнопка пульсирует когда с ней не происходит ни каких действий. Тем самым привлекает внимание пользователя. Пульсация пропадает если на кнопку навести курсор.
Html:
<div class="container"><button class="pulse-button">+</button></div>
Css:
body, html {height:100%;background:#f0f0f0}
.container {width:200px;height:100%;margin:0 auto 0}
.pulse-button {position:relative;top:50%;left:50%;margin-left:-20px;margin-top:-20px;display: block;width:40px;height:40px;font-size:1.3em;font-weight:bold;color:#fff;text-shadow:0 1px 0 #1f4c76;border:1px solid #3480c7;box-shadow:0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #abcbe9;border-radius:100%;v-align:middle;background:#5a99d4;background-image:-webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #6ea6d9), color-stop(100%, #468ccf));background-image:-webkit-linear-gradient(#6ea6d9, #468ccf);background-image:-moz-linear-gradient(#6ea6d9, #468ccf);background-image:-o-linear-gradient(#6ea6d9, #468ccf);background-image:linear-gradient(#6ea6d9, #468ccf);cursor:pointer;-webkit-animation: pulse 1s infinite cubic-bezier(0.6, 0, 0, 1)}
.pulse-button:hover {-webkit-animation:none}
@-webkit-keyframes pulse {to {box-shadow:0 0 0 15px rgba(90, 153, 220, 0), inset 0 1px 0 #abcbe9}}
|