100% но есть вопрос

Сделал через псевдоэлемент, которому указал высоту и ширину в процентах от высоты и ширины родителя.
Сперва делал через пиксели, но если меняешь размеры родителя, то картинка портится.
А вопрос такой. Правильно ли я понимаю, что сделать хорошо (через проценты) можно только с помощью псевдоэлемента? С помощью блока .help у нас никак не получится так сделать, а только через пиксели.

.btn {
width: 250px;
margin: 0 25px;
margin-top: 100px;
padding: 20px 0;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: white;
background: #2c3e50;
position:relative;
cursor: pointer;
box-shadow:
inset 0 -5px #2ecc71,
inset 0 5px #16a085,
0 20px 0 -10px #2980b9,
0 40px 0 -20px #3498db,
0 -20px 0 -10px #c0392b,
0 -40px 0 -20px #e74c3c;
}

.btn:after {
position:absolute;
content:"";
top:0;
left:0%;
width:50%;
height:100%;
box-shadow:
inset 0 5px #2ecc71,
inset 0 -5px #16a085;
}