Как сделать данную кнопку на css

328

23 декабря 2016, 11:54

Как сделать данную кнопку на css Т.е не тупо подставить background-image а сверстать её.

Answer 1

Ну как-то вот так. Не точная копия вышла

div { 
  display:block; 
  position:relative; 
  width:200px; 
  height:40px; 
  background: linear-gradient(to bottom, #dd3910 0%,#e25b39 49%,#dd3910 100%); 
  border-radius: 20px; 
  box-shadow: 0px -1px 0px #fbb185; 
} 
div:before { 
  content: ''; 
  display:block; 
  position:absolute; 
  width: 96%; 
  height: 96%; 
  background-color:#ff843b; 
  border-radius: 20px; 
  left: 2%; 
  right: 2%; 
  top: -3px; 
  z-index: -1; 
}

<div></div>

Answer 2

Очень подобно сделал, но с минимумом стилей

a { 
  /* Просто для демонстрации */ 
  margin-top: 15px; 
 
  display: block; 
  width: 372px; 
  height: 65px; 
  border-radius: 48px/34px; 
  background: linear-gradient(to left top, #ec643b, #e15b3a); 
  box-shadow: 0 -3px #dc3d18, 0 -5px #ff7f44, 0 -7px #fb7039; 
}

<a href="#"></a>

Советы для тех, кто хотел бы сделать лучше.

Кому хочется поиграться и сделать лучше, даю советы:

Можете добавить дополнительные цвета в градиенты, причём градиенты поддерживают множественные цвета а также после каждого цвета градиента можно указывать любые единицы измерения, а также выражения вроде calc (100% - 2px).

Посмотрите как градиент ведёт себя после изменений ширины окна. Демонстрация:

a { 
  /* Просто для демонстрации */ 
  margin-top: 15px; 
 
  display: block; 
  width: 100%; 
  height: 70px; 
  background: linear-gradient(to right,  
    blue 20px, 
    red 20px, 
    yellow 40px, 
    orange calc(40px + 20%), 
    green 40%, 
    purple 300px, 
    red calc(100% - 20px), 
    blue calc(100% - 20px)); 
}

<a href="#"></a>

Если надо тени сплошного цвета используйте box-shadow, причём box-shadow может наслаиваться. Демонстрация

a { 
  /* Просто для демонстрации */ 
  margin-top: 15px; 
 
  display: block; 
  width: 100%; 
  height: 70px; 
  background-color: #ccc; 
  box-shadow: 0 10px blue, 0 20px purple, 0 30px lime, 0 40px tomato; 
}

<a href="#"></a>

Если надо тени градиентного цвета, то то можно достичь либо с помощь других элементов, либо с помощью псевдоэлементов before и after (предпочтителен именно этот способ, так как он не затрагивает разметку). Устанавливает блоку position: relative;, а псевдоэлементам устанавливаем position: absolute;, а также content: ""; чтобы они вообще отображалась и отрицательный z-index, чтобы отображать тень за элементом, а не перед ним.

Демонстация:

a { 
  /* Просто для демонстрации */ 
  margin-top: 15px; 
  display: block; 
  width: 100%; 
  height: 70px; 
  background-color: #ccc; 
   
  position: relative; 
} 
 
a:before { 
  position: absolute; 
  content: ""; 
  left: 0; 
  top: 20px; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(to right, blue, red); 
  z-index: -1; 
}