Информационные блоки для сайта

На сайте иногда должны присутствовать информационные блоки, которые несли бы суть того или иного решения.

Пропишем в CSS вашей темы общий стиль кнопок

.message {  
  line-height: 24px;  
  font-weight: normal;  
  padding: 15px 15px 15px 80px;  
  position: relative;  
  margin: 10px 0;  
  border-radius: 5px; 
}

Светло зеленый:

CSS

.success-message {  
background: url("http://website-desing.ru/images/success.png") no-repeat scroll 15px 3px #EEF4D4;  
border: 1px solid #8FAD3D;  
}

HTML

<div class="success-message message">Светло зеленый информационный блок</div>

Светло красный:

CSS

.success-message {  
background: url("http://website-desing.ru/images/success.png") no-repeat scroll 15px 3px #EEF4D4;  
border: 1px solid #8FAD3D;  
}

HTML

<div class="success-message message">Светло зеленый информационный блок</div>

Светло синий:

CSS

.message-message {  
background: url("http://website-desing.ru/images/message.png") no-repeat scroll 15px 3px #C6D8F0;  
border: 1px solid #4282CC;  
}

HTML

<div class="message-message message">Светло синий информационный блок.</div>

Светло желтый:

CSS

.warning-message {  
background: url("http://website-desing.ru/images/warning.png") no-repeat scroll 15px 3px #FFEA97;  
border: 1px solid #E2B500;  
}

HTML

<div class="warning-message message">Светло желтый информационный блок.</div>