067 607 57 84
МЕНЮ

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>