Вопросы Теги

HTML/CSS - Добавление Значка к кнопке

Я делающий некоторые кнопки CSS и я хочу добавить значок перед текстом, "Текстом кнопки".

Но я не знаю, как я должен сделать это...

HTML <div class="btn btn_red"><a href="#">Crimson</a><span></span></div>

CSS

body {
    margin: 0;
    padding: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
/* Glassy Buttons */
.btn {
    float: left;
    clear: both;
    background: url(imgs/button_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
}
.btn a{
    float: left;
    height: 40px;
    background: url(imgs/button_middle.png) repeat-x left top;
    line-height: 40px;
    padding: 0 10px;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
}
.btn span {
    background: url(imgs/button_right.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}
.btn_gray {background-color: #808080;}
.btn_green { background-color: #ADFF2F;}
.btn_blue {background-color: #0000CD;}
.btn_red {background-color: #DC143C;}
11
задан user377419 16 August 2010 в 02:18
поделиться

2 ответа

Вы можете добавить диапазон перед ссылкой с определенным классом, например так: 

<div class="btn btn_red"><span class="icon"></span><a href="#">Crimson</a><span></span></div>

А затем дать ему определенную ширину и фоновое изображение, как вы делаете с самой кнопкой. 

.btn span.icon {
    background: url(imgs/icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}

Я не гуру CSS, но, судя по всему, думаю, что это должно сработать.

14
ответ дан 3 December 2019 в 02:40
поделиться 
<a href="#" class="btnTest">Test</a>


.btnTest{
   background:url('images/icon.png') no-repeat left center;
   padding-left:20px;
}
6
ответ дан 3 December 2019 в 02:40
поделиться