Oct 19 2012 at 00:34

Набор кнопок flared-up-Rainbow на чистом CSS и HTML

Invite pending

Сегодня получился вот такой простой набор скругленных разноцветных кнопок. Назовем его просто и незамысловато: «flared-up-Rainbow». Надеюсь, кому-то данная статья поможет избежать рутины, а кому-то — немного разобраться в CSS. Примеры с рассуждениями под катом.

Для начала сообразим конструкцию самой кнопки. Может мне и дадут по шапке гуру, но я предпочел использовать в качестве кнопок тег a, а текст кнопки помещать в span (чтобы равнять по высоте). Тип кнопки складывается из набора классов, что позволяет обойтись относительно малым количеством селекторов в файле CSS. Выглядит это так:

<a class="button _SIZE_ _COLOR_"><span>Надпись на кнопке</span></a>

, где:
_SIZE_ — размер кнопки (он же класс: dot, small, medium или big)
_COLOR_ — собственно, цвет кнопки (классы: bRed, bOrange, bYellow, bGreen, bBlue, bPurple, bGray)

Пример: нам нужна Зеленая кнопка Среднего размера с с текстом Скачать:

<a class="button medium bGreen"><span>Скачать</span></a>

И, собственно, примеры с картинками и кодом (на картинках приведены по три ряда кнопок каждого типа: обычные, «onMouseOver», «onMouseDown»):

Для начала организуем кнопку и контейнер для ее надписи с помощью CSS:

a.button { display: inline-block; text-align: center; cursor: pointer; } // кнопка в обычном виде
a.button:hover { background-color: #ffffff; color: #666666; } // кнопка, при наведении курсора
a.button:active { background-color: #fbfbfb; color: #999999; } // кнопка при нажатии на неё
a.button span { display: block; }

Подберем цвета и запишем их в виде отдельной группы селекторов:

.bRed { background-color: #e32636; border: 1px solid #e32636; color: #ffffff; }
.bOrange { background-color: #ff8800; border: 1px solid #ff8800; color: #ffffff; }
.bYellow { background-color: #ffbf00; border: 1px solid #ffbf00; color: #ffffff; }
.bGreen { background-color: #3caa3c; border: 1px solid #3caa3c; color: #ffffff; }
.bBlue { background-color: #3a75c4; border: 1px solid #3a75c4; color: #ffffff; }
.bPurple { background-color: #990066; border: 1px solid #990066; color: #ffffff; }
.bGray { background-color: #999999; border: 1px solid #999999; color: #ffffff; }

А теперь можно организовать размеры:

CSS-код:

.dot { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; width: 16px; height: 16px; border-radius: 8px; }
.dot span { width: 10px; height: 10px; margin: 0px 3px 6px 3px; text-shadow: none; }

CSS-код:

.small { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; height: 24px; border-radius: 12px; margin: 10px; }
.small span { margin: 5px 10px 6px 10px; }

CSS-код:

.medium { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; height: 40px; border-radius: 20px; margin: 10px; }
.medium span { margin: 11px 15px 12px 15px; }

CSS-код:

.big { font-family: 'Open Sans Condensed', sans-serif; font-size:36px; width:180px; height:60px; border-radius:30px; margin:10px; }
.big span { margin: 5px 10px 5px 10px; }

Соберем код в ~~кучки~~ файлы:

rainbow.html:

<h1>Класс «dot»</h1>
<p style="width:100%;text-align:center;">Данный тип подходит для использования в качестве односимвольных кнопок</p>

<a class="button dot bRed"><span>–</span></a>
<a class="button dot bOrange"><span>&plus;</span></a>
<a class="button dot bYellow"><span>–</span></a>
<a class="button dot bGreen"><span>&plus;</span></a>
<a class="button dot bBlue"><span>–</span></a>
<a class="button dot bPurple"><span>&plus;</span></a>
<a class="button dot bGray"><span>–</span></a>

<h1>Класс «small»</h1>

<p style="width:100%;text-align:center;">Малые кнопки для карточек товаров или для использования в кнопочных группах</p>
<div style="clear:both;"></div>

<a class="button small bRed"><span>Red small</span></a>
<a class="button small bOrange"><span>Orange small</span></a>
<a class="button small bYellow"><span>Yellow small</span></a>
<a class="button small bGreen"><span>Green small</span></a>
<a class="button small bBlue"><span>Blue small</span></a>
<a class="button small bPurple"><span>Purple small</span></a>
<a class="button small bGray"><span>Gray small</span></a>

<h1>Класс «medium»</h1>
<p style="width:100%;text-align:center;">Средний размер для выделения одной «особо важной» кнопки из группы <b>small</b></p>
<div style="clear:both;"></div>
<a class="button medium bRed"><span>Red medium</span></a>
<a class="button medium bOrange"><span>Orange medium</span></a>
<a class="button medium bYellow"><span>Yellow medium</span></a>
<a class="button medium bGreen"><span>Green medium</span></a>
<a class="button medium bBlue"><span>Blue medium</span></a>
<a class="button medium bPurple"><span>Purple medium</span></a>
<a class="button medium bGray"><span>Gray medium</span></a>

<h1>Класс «big»</h1>
<p style="width:100%;text-align:center;">Крупный размер для отображения кнопок типа "Купить"</p>
<div style="clear:both;"></div>
<a class="button big bRed"><span>Red big</span></a>
<a class="button big bOrange"><span>Orange big</span></a>
<a class="button big bYellow"><span>Yellow big</span></a>
<a class="button big bGreen"><span>Green big</span></a>
<a class="button big bBlue"><span>Blue big</span></a>
<a class="button big bPurple"><span>Purple big</span></a>
<a class="button big bGray"><span>Gray big</span></a>

rainbow.css

/* CSS Document */

a.button { display: inline-block; text-align: center; cursor: pointer; }
a.h, a.button:hover { background-color: #ffffff; color: #666666; }
a.a, a.button:active { background-color: #fbfbfb; color: #999999; }
a.button span { display: block; }

/* Colors */

.bRed { background-color: #e32636; border: 1px solid #e32636; color: #ffffff; }
.bOrange { background-color: #ff8800; border: 1px solid #ff8800; color: #ffffff; }
.bYellow { background-color: #ffbf00; border: 1px solid #ffbf00; color: #ffffff; }
.bGreen { background-color: #3caa3c; border: 1px solid #3caa3c; color: #ffffff; }
.bBlue { background-color: #3a75c4; border: 1px solid #3a75c4; color: #ffffff; }
.bPurple { background-color: #990066; border: 1px solid #990066; color: #ffffff; }
.bGray { background-color: #999999; border: 1px solid #999999; color: #ffffff; }

/* Sizes */

.big { font-family: 'Open Sans Condensed', sans-serif; font-size:36px; width:180px; height:60px; border-radius:30px; margin:10px; }
.big span { margin: 5px 10px 5px 10px; }
.medium { font-family: Tahoma, Geneva, sans-serif; font-size: 14px; height: 40px; border-radius: 20px; margin: 10px; }
.medium span { margin: 11px 15px 12px 15px; }
.small { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; height: 24px; border-radius: 12px; margin: 10px; }
.small span { margin: 5px 10px 6px 10px; }
.dot { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; width: 16px; height: 16px; border-radius: 8px; }
.dot span { width: 10px; height: 10px; margin: 0px 3px 6px 3px; text-shadow: none; }

Спасибо за внимание. Прошу пользоваться на здоровье и комментировать по существу, высказывая свои соображения и корректировки. Буду апдейтить по возможности.

Tags:

Hubs:

Lumber room