0

Нужно сделать кнопку такого вида
alt text

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, но ничего не отображается.

http://jsfiddle.net/j3bte/6/

Есть ли способ добавить этот элемент через псевдоэлемент :after или тут нужно использовать блок с абсолютным позиционированием?

2 ответа 2

4

:before и :after добавляет контент к содержимому элемента, а у input же как такового содержимого нет.

Решение - завернуть инпуты в div и к нему уже применять псевдоэлементы.

или

использовать button так как это контейнер в отличии от input

http://jsfiddle.net/soledar10/AAQth/

input[type="submit"], input[type="button"] {
    outline: none;
}
.calculate-button-1 {
    width: 501px;
    height: 70px;
    margin: 10px 0 0 10px;
    padding-top: 2px !important;
}
.btn-2 {
    background: url(http://i.imgur.com/e0kwTeY.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;
}
.input-wrapper {
    position: relative;
}
.input-wrapper:after {
    content:'';
    background: url(http://i.imgur.com/kzKwUd8.png) no-repeat;
    width: 34px;
    height: 18px;
    position: absolute;
    bottom: -16px;
    left: 238px;
}
.btn-2:hover {
    text-decoration: none;
    background: #9edcec;
}
<div style="width: 100%; height: 300px; background-color: #ffcc33; padding-top: 10px;">
    <div class="input-wrapper">
        <input name="" type="button" class="calculate-button-1 btn-2" value="Рассчитайте стоимость онлайн" />
    </div>
</div>

также почитайте http://htmlbook.ru/blog/treugolniki-cherez-css

6
  • Мне нужно использовать input, а с button тоже получается немного не то jsfiddle.net/j3bte/7
    – Heidel
    28 дек 2013 в 14:43
  • сделайте обертку div
    – soledar10
    28 дек 2013 в 14:44
  • а как запозиционировать элемент добавленный через after по центру блока? jsfiddle.net/j3bte/9
    – Heidel
    28 дек 2013 в 14:47
  • в принципе, получилось запозиционировать через margin-left: 462px;, а какого способа просто задать для этого элемента расположение по центру нет?
    – Heidel
    28 дек 2013 в 14:51
  • 1
    сейчас в ответ добавлю
    – soledar10
    28 дек 2013 в 14:55
0

Все конечно отлично в ответе soledar10, но если изменится размер текста ваше выравнивание полетит. думаю стоит лучше сделать так:

.input-wrapper:after {
    content: '';
    background: url(http://i.imgur.com/kzKwUd8.png) no-repeat;  
    width: 35px;
    height: 20px;
    position: absolute; 
    top: 100%; 
    left: 50%;
    margin-left:-17px;     
}

как-то так)))

1
  • че-то я не пойму, какое увеличение какого текста может сбить выравнивание?
    – Heidel
    28 дек 2013 в 17:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.