Небольшой набор стилей CSS3 для создания кнопок
Предлагаю очередной небольшой набор правил и свойств CSS3, для преобразования html-тегов a, input и button в привлекательные кнопки с градиентной заливкой.
С помощью привязки тегов html через определённые классы, с полностью сформированными значениями свойств и правил CSS, вам будет намного проще внедрять на страницы ваших проектов, элементы управления пользовательского интерфейса в виде кнопок.
Использовать данный набор стилей очень просто:
Добавляете к ссылке класс «btn» и всё, стандартная белая кнопка с легким градиентом готова, а в сочетании с классом определенного цвета, вы получите кнопку совершенно другой расцветки, например, добавив к ссылке классы «btn btn-blue», на странице появится градиентная кнопка синего цвета.
<a href="#" class="btn">Кнопка</a> <a href="#" class="btn btn-blue">Кнопка</a> |
Всё тоже самое и с преобразованием в кнопки тегов <input>
и <button>
В набор включены стили для кнопок белого, синего, красного и зеленого цвета
На счёт отображения кнопок в разных браузерах:
В современных версиях стопроцентная поддержка всех свойств CSS3. В Internet Explorer 8-й и 9-й версий, градиентную заливку вы не увидите, кнопки примут плоскую форму со сплошной заливкой, что собственно не делает их хуже в плане восприятия, тем более что плоский дизайнерский стиль нынче в моде.
С уважением, Андрей
Всего комментариев: 0