Нужно сделать кнопку такого вида
HTML
<input name="" type="button" class="calculate-button-1 btn-2" value="Рассчитайте стоимость онлайн" />
CSS
.btn-2 {
background: url(../images/bg_button_1.png) top left repeat;
border: 5px solid #fff;
font-family: 'pt_sans_narrowbold';
font-size: 30px;
color: #2b2a29;
cursor: pointer;
display: block;
padding: 0;
text-decoration: underline;
text-align: center;
display: block;
}
.btn-2:after {
content: url(../images/bg_button_after.png);
}
.btn-2:hover {
text-decoration: none;
background: #9edcec;
}
.calculate-button-1 {
width: 501px;
height: 70px;
margin-top: 55px;
margin-left: 230px;
padding-top: 2px !important;
}
Не получается добавить белый треугольник под кнопкой, пробую добавить его через псевдоэлемент :after
, но ничего не отображается.
Есть ли способ добавить этот элемент через псевдоэлемент :after
или тут нужно использовать блок с абсолютным позиционированием?