3D кнопка на чистом CSS


Кнопка (ссылка) на чистом CSS без использования JavaScript, которая при клике утапливается в страницу. Используется анимация, которая доступна в css3. Работает во всех современных браузерах.

Рабочий пример кнопки:

Нажми меня

CSS код кнопки:

a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Calibri';
font-weight: 700;
font-size: 2em;
display: block;
padding: 4px;
border-radius: 8px;
box-shadow: 0px 9px 0px rgba(150, 104, 98, 1), 0px 9px 25px rgba(0,0,0,.7);
margin: 100px auto;
text-align: center;
width:220px;
transition: all .1s ease;
}

a:active {
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

HTML код кнопки:

<a href="#" class="button">Нажми меня</a>

Другие публикации:



Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статусы для соц.сетей на ArtKiev Design Studio