[Dennis]

Решил установить на сайт красивые CTA-кнопки через CSS. Я не верстальщик и не программер, с CSS не работал, только корректировал существующий немного. Кнопка встала, но текст кнопки по стилю аналогичен ссылкам по всему сайту, а хочется его поменять, т.к. шрифт мелкий, синего цвета на синем фоне и т.п. Вот как я попытался это сделать - добавил в файл стилей стиль кнопки .button и попытался стиль текста исправить созданием нового DIV .cta_button:

Код:

.button {
    cursor:pointer;
    display:block;
    height:41px;
    width:232px;
    line-height:41px;
    text-align:center;
    background-image:url('/images/cta_blue.png');
    background-repeat:no-repeat;
}
.button.blue { background-position:0 0 } /* синяя кнопка */
.button.blue:hover { background-position:-232px 0 } /* активная синяя кнопка */

.cta_button {
	font: bold 14px/16px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	margin:0px;
	text-transform:uppercase;
}

А в том месте, где необходимо поставить саму кнопку на странице вставляю такой код:

Код:

<div class="cta_button"><a href="/ru/buy_now" title="Купить сейчас >" class="button blue">Купить сейчас ></a></div>

DIV .cta_button как раз добавил позднее в попытке отформатировать текст кнопки, но применился только text-transform:uppercase, а остальные стили игнорируются.

Я понимаю, что здесь, возможно, много грубых ошибок и не соблюдены какие-то принципы. Короче не могу избавиться от влияния глобальных настроек ссылок a href в CSS. Помогите советом, что делаю не так. Спасибо.

[HiNeX]

Dennis, я не дизайнер, но возможно...

PHP код:

.cta_button a {
    font: bold 14px/16px Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    margin:0px;
    text-transform:uppercase;
} 


[Dennis]

HiNeX, ну ссылка стала белой, жирной и шрифт увеличился. Сработало, спасибо. Только почему-то вылезла наверх - прижалась к верхнему краю кнопки, а не по центру. Буду колдовать дальше.

[HiNeX]

Dennis, margin:0px; убрать попробуйте.)

[Dennis]

Спасибо, но что-то не помогло. Ничего не поменялось

[Daniel_lt]

Dennis, если я Вас правильно понял - такой код должен все исправить:

Код HTML:

.cta_button a {
    font: bold 14px/16px Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    margin:0px;
    line-height:41px;
    text-transform:uppercase;
}

[Dennis]

Daniel_lt, да, всё заработало - буквы стали по центру по вертикали. Спасибо! Теперь буду эффекты шрифту придавать, хочу более объёмным сделать текст.

[Daniel_lt]

Dennis, если что, пишите - помогу :)