Красивые 3D кнопки с помощью CSS

HTML и CSS WordSmall

3д кнопки

На любом сайте можно обнаружить переходную ссылку в виде веб-кнопке оформленную по дизайну ресурса. Это очень удобно и, кроме того, еще и красиво, что обязательно привлечет внимание пользователя. В сегодняшнем мини-уроке рассмотрим на примере создания кнопке в 3D стиле. Она создаёт вид объемного элемента, а при нажатии демонстрирует реалистичный эффект вдавливания.

Посмотреть Demo

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

Посмотреть Demo

Стили тени и отступа

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;
}
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code