Создание кнопок без изображений по типу Google на JQuery/CSS

Быстрый ответ

Создание HTML-кнопок с применением CSS3, не требующее использования графических изображений, это весьма реально. Для этого можно применить такие свойства, как linear-gradient, box-shadow и border-radius. Для наглядности приводим пример кода:

.btn {
    border: none;
    padding: 8px 15px;
    background: linear-gradient(#f8f8f8, #e7e7e7);
    border-radius: 4px;
    box-shadow: 0 2px #d3d3d3;
    text-shadow: 0 -1px 0 #fff;
}

.btn:hover {
    background: linear-gradient(#e7e7e7, #f8f8f8);
}

<button class="btn">Нажми меня</button>

Цвета и размеры позволяют настроить кнопки с целью создания стилевого единства и формирования интуитивного пользовательского интерфейса.

Создание кнопок с применением HTML и CSS

Структурирование с помощью семантического HTML

Для отражения разнообразных состояний кнопок и стилей удобно использовать HTML5 элементы button или a, дополненные тегами span и b:

<button class="btn left"><span><b>Назад</b></span></button>
<button class="btn center"><span><b>Домой</b></span></button>
<button class="btn right"><span><b>Вперед</b></span></button>

С помощью различных классов, таких как .left, .center и .right, каждая кнопка приобретает своё уникальное состояние и визуальный сигнал при наведении. Использование свойства font-weight позволяет выделить главную кнопку.

Подробнее об этом расскажет наш спикер на видео

Упрощение интернационализации

Отказ от изображений для кнопок облегчает процесс локализации графики и делает интернационализацию проще для продуктов, ориентированных на глобальную аудиторию.

Обеспечение доступности

Применение семантически правильного HTML предоставляет возможность сделать кнопки доступными для всех пользователей, не зависимо от включенного или выключенного JavaScript. Стилизация кнопок с помощью CSS гарантирует их немедленную отрисовку в браузере, тем самым повышая производительность.

Улучшение элементов ввода

Вы можете преобразовать обычные элементы input в стилизованные кнопки с использованием jQuery:

$('input[type="submit"]').addClass('btn'); // Всего один штрих – и обыденное становится стильным!

Так вы сможете поддерживать порядок в HTML-коде, придавая изящество вашему интерфейсу.

Визуализация

Создание привлекательных кнопок без изображений – это подобно мастерству создания оригами, великое искусство из простого материала:

Пусть ваше мастерство работы с CSS станет залогом создания эффектных кнопок.

Улучшение дизайна с помощью продвинутых техник

Добавление градиентов с использованием CSS псевдо-элементов

Псевдо-элементы ::before и ::after могут быть использованы для дополнения дизайна кнопок, создавая иллюзию градиентов и придавая глубину в плоским компонентам:

.btn::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.5), transparent);
}

Уроки из практики Google CSS

Изучение практик Google в области дизайна и их применение CSS может оказаться полезным. Ресурсы, такие как библиотека Closure и pixify.com, помогут вам освоить и применить ключевые концепции в ваших проектах, уважая при этом авторские права.

Учет отображения без JavaScript

Ваш подход к дизайну должен быть более глубоким, чем простое копирование. Подумайте о том, как ваш сайт будет выглядеть без использования JavaScript, и черпайте вдохновение из подобных открытых проектов.

Полезные материалы

1. Использование CSS-градиентов – CSS: каскадные таблицы стилей | MDN — подробное руководство по реализации CSS-градиентов, которые важны при создании кнопок без изображений.
2. Material Design — официальные рекомендации Google по дизайну кнопок, подтверждающие возможность создания дизайна без изображений.
3. Творческие стили кнопок — коллекция новаторских способов стилизации кнопок, выполненных без изображений.
4. Кнопки с градиентами CSS3 – Web Designer Wall — руководство по созданию стильных кнопок с градиентами с помощью CSS3, не используя при этом изображения.