Помогите с CSS-кнопками

(Ответов: 7, Просмотров: 659)
  1. Новичок
    • Регистрация: 17.02.2012
    • Сообщений: 5
    • Репутация: 0
    Решил установить на сайт красивые 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. Помогите советом, что делаю не так. Спасибо.
    • 0
  2. PHP Developer Аватар для HiNeX
    • Регистрация: 26.04.2012
    • Сообщений: 222
    • Репутация: 47
    • Webmoney BL: ?
    Dennis, я не дизайнер, но возможно...
    PHP код:
    .cta_button a {
        
    fontbold 14px/16px VerdanaArialHelveticasans-serif;
        
    color:#FFFFFF;
        
    margin:0px;
        
    text-transform:uppercase;

    • 1

    Спасибо сказали:

    Dennis(05.05.2012),
  3. Новичок
    • Регистрация: 17.02.2012
    • Сообщений: 5
    • Репутация: 0
    HiNeX, ну ссылка стала белой, жирной и шрифт увеличился. Сработало, спасибо. Только почему-то вылезла наверх - прижалась к верхнему краю кнопки, а не по центру. Буду колдовать дальше.
    • 0
  4. PHP Developer Аватар для HiNeX
    • Регистрация: 26.04.2012
    • Сообщений: 222
    • Репутация: 47
    • Webmoney BL: ?
    Dennis, margin:0px; убрать попробуйте.)
    • 0
  5. Новичок
    • Регистрация: 17.02.2012
    • Сообщений: 5
    • Репутация: 0
    Спасибо, но что-то не помогло. Ничего не поменялось
    • 0
  6. Студент Аватар для Daniel_lt
    • Регистрация: 16.02.2012
    • Сообщений: 52
    • Репутация: 4
    Dennis, если я Вас правильно понял - такой код должен все исправить:
    Код HTML:
    .cta_button a {
        font: bold 14px/16px Verdana, Arial, Helvetica, sans-serif;
        color:#FFFFFF;
        margin:0px;
        line-height:41px;
        text-transform:uppercase;
    }
    • 1

    Спасибо сказали:

    Dennis(05.05.2012),
  7. Новичок
    • Регистрация: 17.02.2012
    • Сообщений: 5
    • Репутация: 0
    Daniel_lt, да, всё заработало - буквы стали по центру по вертикали. Спасибо! Теперь буду эффекты шрифту придавать, хочу более объёмным сделать текст.
    • 0
  8. Студент Аватар для Daniel_lt
    • Регистрация: 16.02.2012
    • Сообщений: 52
    • Репутация: 4
    Dennis, если что, пишите - помогу :)
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Помогите с css
Прочее 0 01.05.2011 23:43
помогите пож.
Вопросы от новичков 11 29.04.2011 13:45
Какая разница между кнопками Like и Share от Facebook?
Социальные сети 1 27.01.2011 13:08

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры