На сайте иногда должны присутствовать информационные блоки, которые несли бы суть того или иного решения.
Пропишем в CSS вашей темы общий стиль кнопок
1 2 3 4 5 6 7 8 |
.message { line-height: 24px; font-weight: normal; padding: 15px 15px 15px 80px; position: relative; margin: 10px 0; border-radius: 5px; } |
Светло зеленый:
CSS
1 2 3 4 |
.success-message { background: url("http://website-desing.ru/images/success.png") no-repeat scroll 15px 3px #EEF4D4; border: 1px solid #8FAD3D; } |
HTML
1 |
<div class="success-message message">Светло зеленый информационный блок</div> |
Светло красный:
CSS
1 2 3 4 |
.success-message { background: url("http://website-desing.ru/images/success.png") no-repeat scroll 15px 3px #EEF4D4; border: 1px solid #8FAD3D; } |
HTML
1 |
<div class="success-message message">Светло зеленый информационный блок</div> |
Светло синий:
CSS
1 2 3 4 |
.message-message { background: url("http://website-desing.ru/images/message.png") no-repeat scroll 15px 3px #C6D8F0; border: 1px solid #4282CC; } |
HTML
1 |
<div class="message-message message">Светло синий информационный блок.</div> |
Светло желтый:
CSS
1 2 3 4 |
.warning-message { background: url("http://website-desing.ru/images/warning.png") no-repeat scroll 15px 3px #FFEA97; border: 1px solid #E2B500; } |
HTML
1 |
<div class="warning-message message">Светло желтый информационный блок.</div> |
