3D Кнопка

Большая 3D кнопка синего цвета с помощью CSS3

by alexstudioweb

HTML

<a href="#" class="button">
  <span class="submit">Обрати</span> квартиру<span class="submit">!</span>
</a>

CSS

* {
    box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0 auto;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  background: #cfd6d9;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Helvetica, sans-serif;
}

/* Базовые стили кнопки 3D */

.button {
  color:#2c2e32;
  /* Относительное позиционирование */
  position: relative;
  /* Устанавливаем внутренние отступы */
  padding: 15px 20px;
  /* Убираем подчёркивание и выравниваем текст по центру */
  text-decoration: none;
  text-align: center;
  /* Размер и начертание шрифта */
  font-size: 28px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  /* Эффект тени текста */
  text-shadow: 1px 2px 2px #30698F;
  /* Внешняя тень кнопки */
  -webkit-box-shadow: 0px 9px 0px #1f9eaa, 0px 9px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 9px 0px #1f9eaa, 0px 9px 25px rgba(0, 0, 0, 0.7);
  -ms-box-shadow: 0px 9px 0px #1f9eaa, 0px 9px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 9px 0px #1f9eaa, 0px 9px 25px rgba(0, 0, 0, 0.7);
  /* Цвет текста */
  color: #fff;
  /* Цвет фона кнопки */
  background-color: #19b9c8;
  /* Скругляем углы */
  border-radius: 8px;
  /* Убираем рамку */
  border: none;
  outline: 0 none;
  overflow: hidden;
  /* Курсор ввиде руки */
  cursor: pointer;
}

/* Стиль кнопки при нажатии */

.button1:active, .button1:focus, .button1:hover {
  box-shadow: 0px 3px 0px #1d8690, 0px 3px 6px rgba(0, 0, 0, 0.9);
  top: 6px;
  color:#fff;
}

/* Стиль выделения букв */

.submit {
  /* Трансформируем буквы в заглавные и меням цвет */
  text-transform: uppercase;
  color: #efd959;
}