На любом сайте можно обнаружить переходную ссылку в виде веб-кнопке оформленную по дизайну ресурса. Это очень удобно и, кроме того, еще и красиво, что обязательно привлечет внимание пользователя. В сегодняшнем мини-уроке рассмотрим на примере создания кнопке в 3D стиле. Она создаёт вид объемного элемента, а при нажатии демонстрирует реалистичный эффект вдавливания.
HTML
<button class='green'>Посмотреть</button> <button class='red'>Посмотреть</button> <button class='yellow'>Посмотреть</button> <button class='purple'>Посмотреть</button>
Вначале идет HTML-разметка, представляющая собой каркас 3D кнопок. Строение создано при помощи тега <button> из-за его расширенных возможностей. Но его легко заменить в случае необходимости на привычный нам тег <a> (ссылка). Следовательно, не забываем после изменения подкорректировать стили, а точнее, заменить <button> на <a>.
CSS
button{
border-radius: 10px;
border: none;
padding: 10px;
color: #111;
border-radius: 10px;
font-size: 1.2em;
font-weight: 200;
transition: all 0.2s;
margin: 5px;
border-bottom: 0px solid #eee;
cursor:pointer;
}
button:active{
transform: scaleX(0.9) translateY(4px);
}
button.green{
background: #82CA9D;
}
button.green:not(:active){
border-bottom: 4px solid #62AA7D;
}
button.red{
background: #F7977A;
}
button.red:not(:active){
border-bottom: 4px solid #D7775A;
}
button.blue{
background: #7EA7D8;
}
button.blue:not(:active){
border-bottom: 4px solid #5E87B8;
}
button.yellow{
background: #FDC68A;
}
button.yellow:not(:active){
border-bottom: 4px solid #DDA66A;
}
button.purple{
background: #A187BE;
}
button.purple:not(:active){
border-bottom: 4px solid #81679E;
}
Следующий шаг – это стилизация объемных кнопок. В принципе ничего сложного нет, но есть некоторые моменты, на которые я бы обратил внимание. В демо-просмотре 3Д-эффект, нижняя часть кнопке, сделана силами тега border-botton с цветом чуть темнее фона. Это не очень удобно, если необходимо менять цвета, то придется каждый раз подбирать два цвета с разными оттенками. Проще добавить внутреннюю тень с прозрачностью и не забыть про padding (внутренний отступ). Так как тень займет место, к примеру, в 4px, и вид кнопке уже будет не такой.
Демо с тенью вместо border’a
Стили тени и отступа
CSS
button{
border-radius: 10px;
border: none;
padding: 10px 10px 14px 10px;
color: #111;
border-radius: 10px;
font-size: 1.2em;
font-weight: 200;
transition: all 0.2s;
margin: 5px;
border-bottom: 0px solid #eee;
cursor:pointer;
}
button:active{
transform: scaleX(0.9) translateY(4px);
}
button.green{
background: #82CA9D;
}
button.red{
background: #F7977A;
}
button.blue{
background: #7EA7D8;
}
button.yellow{
background: #FDC68A;
}
button.purple{
background: #A187BE;
}
button:not(:active){
box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.18) inset;
}