WebМЕГАПОСТыМоё

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

Оригинал статьи, ждущей инвайта на Хабр лежит тут в песочнице

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


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

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

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



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

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


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


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

Мелкие кнопки с закругленными краями - HTML, CSS, JS

CSS-код:

Малые кнопки с закругленными краями - HTML, CSS, JS

CSS-код:

Средние кнопки с закругленными краями - HTML, CSS, JS

CSS-код:

Крупные кнопки с закругленными краями - HTML, CSS, JS

CSS-код:



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

rainbow.html:



rainbow.css

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

Добавить комментарий