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

J.Joe

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

2 ответа

J.Joe

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

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;
}

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

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

  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));
}
  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;
}
  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;
}


J.Joe

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

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;
}

licensed under cc by-sa 3.0 with attribution.