Почитал комментарии под заданием: его явно можно выполнить очень разными способами. Кто-то утверждает, что вообще не использовал div.help, например. А кто-то умудряется применять .btn:after. Хотелось бы увидеть примеры кода без использования второго дива. Киньте кто-нибудь, хочется посмотреть на реализацию. Дело в том, что моё решение мне кажется «не совсем стандартным», что ли, думаю, что то же самое можно сделать и проще. Если не трудно, посмотрите, насколько оно корректно. К решению подошёл так: сначала задал для первого div 6 теней: обе красные, обе синие и тень цвета #16a085 в обе стороны от блока по вертикали. А дальше тупо при помощи position:absolute и задания размеров разместил div.help в нужном месте, и уже от него отбросил две недостающих светло-зелёных тени. Под конец пришлось ещё с отступами поиграться, чтоб на 100% натянуть (а наверняка ведь есть примеры решения без изменения начальных стилей).
В общем-то нормально, но можно упростить, не позиционируя вспомогательный блок абсолютно: для .btn задать 4 тени, и для .help — 4 тени. Вместо вспомогательного блока можно вполне сделать псевдоэлемент.
Прошёл испытание заново, там оказывается можно сделать вообще всё просто: без позиционирования и псевдоэлементов. Для div.help тоже используется только две тени.
При первом решении не разглядел, что некоторые тени там нужно задать как inset, и тогда можно будет не менять размер начального блока. То есть просто напутал с размерами.
можно сделать совсем просто 
.btn {
width:250px;
padding:15px 0;
margin:0 25px;
margin-top:105px;
line-height:20px;
text-align:center;
text-transform:uppercase;
cursor:pointer;
color:white;
background:#2c3e50;
box-shadow:
-230px 25px 0 -20px #ecf0f1,
-105px 25px 0 -20px #16a085,
20px 25px 0 -20px #2ecc71,
230px -25px 0 -20px #ecf0f1,
105px -25px 0 -20px #16a085,
-20px -25px 0 -20px #2ecc71,
0 25px 0 -10px #2980b9,
0 45px 0 -20px #3498db,
0 -25px 0 -10px #c0392b,
0 -45px 0 -20px #e74c3c;
}Сделал с помощью хелпа. Не могу понять почему хелп свободно размещается на кнопке «Поехали!», они же оба блоки, никакого позиционирования нет, вроде должны отталкиваться. Или я что-то перепутал?
.btn{
box-shadow: inset 0 5px 0 0 #16a085,
inset 0 -5px 0 0 #16a085,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help {
width: 125px;
height: 5px;
background-color: #2ecc71;
margin-left: 25px;
margin-top: -60px;
box-shadow: 125px 55px 0 0 #2ecc71;
}Использовал 6 теней на кнопке (2 внутренних). Одну внутреннюю перекрыл вспомогательным дивом, вторую тенью от него.
Сделал на чистом CSS. Спасибо vnlucky за подсказку как уменьшить размеры кнопок с помощью внутренних отступов. 
У меня получилось на одну тень меньше: всего 9 штук использовал
с начала не увидел .help )
box-shadow:
inset 125px -135px 0px -130px #16a085,
inset 0 -55px 0 0 #2c3e50,
inset -125px -55px 0 0px #16a085,
inset 125px -55px 0 0px #2ecc71,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help {
width: 125px;
height: 5px;
background-color: #2ecc71;
position: relative;
top: -5.5px;
left: 150px;
}
Как мне кажется там нужно было просто использовать класс .help.
.btn {
position:relative;
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
cursor: pointer;
background: #2c3e50;
box-shadow:
inset 0 -5px 0 0 #16a085,
inset 0 5px 0 0 #16a085,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help{
position:absolute;
width:125px;
height:5px;
left:25px;
box-shadow:
125px -5px 0 0 #2ecc71,
0 -60px 0 0 #2ecc71;
}Насколько я понял задачу - необходимо было отработать тенями. Position: absolute тут ни к чему. Задал размеры класса .help и от него уже расставил тени внутри блока .btn.
.btn {
box-shadow:
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;
}
.help {
width: 125px;
height: 5px;
box-shadow:
150px -60px 0 0 #16a085,
25px -5px 0 0 #16a085,
25px -60px 0 0 #2ecc71,
150px -5px 0 0 #2ecc71;
}
Насколько корректно такое решение?
.btn {
position: relative;
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
cursor: pointer;
background: #2c3e50;
box-shadow:
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
inset 0 5px 0 0 #16a085,
inset 0 -5px 0 #2ecc71;
}
.btn::before {
position: absolute;
content: "";
display: block;
height: 5px;
width: 125px;
background-color: #2ecc71;
top: 0;
left: 0;
}
.btn::after {
position: absolute;
content: "";
display: block;
height: 5px;
width: 125px;
background-color: #16a085;
top: 55px;
left: 0;
}Неплохой вариант по-моему. Достаточно оригинальный, и без использования .help
html, body {
width: 300px;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 18px;
background: #ecf0f1;
}
.btn{
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
cursor: pointer;
background: #2c3e50;
box-shadow:
inset 0 5px 0 0 #16a085,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
inset 0 -5px 0 0 #2ecc71,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c;
}
.help{
position:relative;
top:-60px;
left:25px;
width: 125px;
height:60px;
box-shadow:inset 0 5px 0 0 #2ecc71,
inset 0 -5px 0 0 #16a085;
}
все просто, с позиционировал блок задал высоту аналогичную кнопке, итог 8теней
Добавлю, пожалуй, свой вариант, наиболее элегантный, на мой взгляд. Может кому понравится.
За основу взял идею sergey.fomenko с псевдоэлементами .btn::before и .btn::after
- В .btn добавляем только 4 внешних тени и
position:relative(для псевдоэлементов) - Псевдоэлемент ::before задаём ширину-высоту, делаем absolut, с пустым content, позицией top:0 left:0 (bottom:0 для ::after)
- Забегаем на следующий курс и в псевдоэлементы добавляем линейный градиент на два цвета без перехода. Не забываем поменять порядок цветов для второго псевдоэлемента.
background: linear-gradient(угол наклона, цвет | покрытие)
Кусок CSS кода:
box-shadow:
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db;}
.btn::before {
content: “”;
position: absolute;
width: 100%;
height: 5px;
left: 0;
top: 0;
background: linear-gradient(90deg, #2ecc71 50%, #16a085 50%);}
.btn::after {
content: “”;
position: absolute;
width: 100%;
height: 5px;
left: 0;
bottom: 0;
background: linear-gradient(-90deg, #2ecc71 50%, #16a085 50%);}
Прекрасный вариант. Мне очень нравится)
пробовал этим вариантом получилось подобно сделать только с 3 раза, странно как то работает строка кода, то изменила мне ширину .btn то вообще не отображала элемент, получилось только после написания кода абсолютно с нуля.
Какая именно строка кода странная?
не строка кода а редактор кода, не так написал немного, причем я перепроверил сто раз, все верно было введено до каждой запятой.
А что за редактор, если не секрет?
htmlacademy редактор непосредственно в задании