Как сверстать такую кнопку?

Question

[алексей]

Сама кнопка простецкая, но возникли трудности с иконками на кнопках. Как их делать так, чтобы в будущем не били ссаными тряпками?

В данный момент нагорожено что-то такое:

<div class="btn>
<div class="text"></div>
<div class="ico"></div>
</div>

Для btn задан оранжевый фон, бордер-радиус и position: relative,
для иконки position: absolute и позиционирование от края.

Comments

[SecretBrain]

div class="btn" где-то рыдает Вадим Макеев. Вы бы хоть ссылку использовали что-ли.

Answer 1

[rusglov]

Можно через псевдокласс иконку

Answer 2

[Fl_SparkyBooMan]

<div class="btn>
<div class="btnContainer">
<div class="btnText"> Send Message </div> //текст кнопки
<div class="btnIco"> -> </div> //иконка кнопки, можно в виде знака, можно и в виде картинки
</div>
</div>

.btn {
width: 150px;  //задаешь свое значение длины
height: 50px;  //задаешь свое значение
padding: 10px;  //задаешь внутренний отступ для блока с классом btn
border-radius: 50%;   //задаешь окружность бордера
background-color: #fff;  //задаешь значение цвета фона кнопки
}
.btnContainer {
width: 100%;  //длина блока с классом btnContainer полностью заполняет блок btn
height: 100%;   //высота блока с классом btnContainer полностью заполняет блок btn
margin: 0 auto;  //выравниваем блок btnContainer по середине
text-align: center;  //выравниваем текст внутри блока btn container
}
.btnText {
width: 80%;
height: 100%;
float: left;  //стыковываем к левому краю
//далее оформляешь как хочешь
}

.btnIco {
width: 20%;
height: 100%;
float: right;  //стыковываем к правому краю
//далее оформляешь как хочешь
}