Как сделать данную кнопку на css Т.е не тупо подставить background-image а сверстать её.
-
4На сосиску похоже :D– YuriCommented 21 дек. 2016 в 21:04
-
А если серьёзно, то сложно. Я вижу горизонтальный и вертикальный градиент, белую тень на одну сторону, тень, которая меньше чем объект, которую можно сделать через дополнительный элемент– YuriCommented 21 дек. 2016 в 21:08
-
Генератор кнопок на любой вкус и цвет bestcssbuttongenerator.com– AndreyCommented 23 дек. 2016 в 13:15
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;
}
<a href="#"></a>
-
.А как же блик? А как же градиент у поверхности? А как же более темный цвет ближе к краям? Commented 21 дек. 2016 в 21:30
-
@АлексейШиманский Вы знаете, я не ставил цели сверстать 1:1. Но если вы хотите можете предложить свой вариант, я не против. Commented 21 дек. 2016 в 21:33
-
-
1А кто проголосовал против может рассказать, что не так? Commented 22 дек. 2016 в 8:25
-
@АлексейШиманский Добавил подробные советы как можно улучшить, поэтому, если есть желание, дерзайте. Commented 22 дек. 2016 в 9:26
Ну как-то вот так. Не точная копия вышла
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>