На любом сайте можно обнаружить переходную ссылку в виде веб-кнопке оформленную по дизайну ресурса. Это очень удобно и, кроме того, еще и красиво, что обязательно привлечет внимание пользователя. В сегодняшнем мини-уроке рассмотрим на примере создания кнопке в 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; }