2

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

3
  • 4
    На сосиску похоже :D
    – Yuri
    21 дек 2016 в 21:04
  • А если серьёзно, то сложно. Я вижу горизонтальный и вертикальный градиент, белую тень на одну сторону, тень, которая меньше чем объект, которую можно сделать через дополнительный элемент
    – Yuri
    21 дек 2016 в 21:08
  • Генератор кнопок на любой вкус и цвет bestcssbuttongenerator.com
    – Andrey
    23 дек 2016 в 13:15

2 ответа 2

15

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

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>

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

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

  1. Можете добавить дополнительные цвета в градиенты, причём градиенты поддерживают множественные цвета а также после каждого цвета градиента можно указывать любые единицы измерения, а также выражения вроде 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>

  1. Если надо тени сплошного цвета используйте 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>

  1. Если надо тени градиентного цвета, то то можно достичь либо с помощь других элементов, либо с помощью псевдоэлементов 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;
}
<a href="#"></a>

5
  • .А как же блик? А как же градиент у поверхности? А как же более темный цвет ближе к краям? 21 дек 2016 в 21:30
  • @АлексейШиманский Вы знаете, я не ставил цели сверстать 1:1. Но если вы хотите можете предложить свой вариант, я не против. 21 дек 2016 в 21:33
  • Да не, я нуб... 21 дек 2016 в 21:35
  • 1
    А кто проголосовал против может рассказать, что не так? 22 дек 2016 в 8:25
  • @АлексейШиманский Добавил подробные советы как можно улучшить, поэтому, если есть желание, дерзайте. 22 дек 2016 в 9:26
13

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.