Приветствую вас, уважаемые читатели и гости блога.
Продолжаю подборку красивых кнопок для блога. На этот раз сделаем пульсирующие кнопочки. Такие обязательно привлекут внимание посетителей. Установить их можно и в самом сообщение, и в гаджет 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>
<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>
Я отметила цветом фон для большей выразительности. Можно эту строку в коде
удалить.
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>
</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>
Вставляем адрес страницы, куда будет переход по ссылке.
С цветом и размерами кнопок тоже можно поиграть во всех кодах.
На сегодня всё. Хочется надеяться, что такие пульсирующие кнопки найдут
применение на ваших блогах. До встречи.
