CSS Кнопка Учебник: Как код кнопки в 5 простых шагов

Здесь, в Design Shack мы хотели бы показать полный спектр учебников, от экспертов PHP проектов очень простые советы CSS. Сегодняшний учебник ориентирован на тех, кто все еще находится в начальной стадии CSS.

Один из самых частых вопросов, которые я получаю от начинающих CSS: "Как я могу создать кнопку?" Это простой вопрос со сложным ответом. Есть довольно много способов пойти об этом, и, к сожалению Есть также довольно много способов пойти не так. Когда я впервые начал в CSS, выяснить все кнопки синтаксис был одним из самых стойких неприятностей я столкнулся, казалось, что я всегда делал это неправильно. Сегодня мы будем проходить через очень простой и гибкий процесс, который вы можете применить к любой кнопке вы создаете. Более важным, чем конечный результат, является углубленное объяснение в каждой точке с изложением того, почему мы делаем это таким образом.

Шаг 1: HTML

Хотите верьте, хотите нет, но это одна из самых сложных частей. Опытному программисту это кажется таким простым. Для новичка, хотя, зная, с чего начать с кнопки может быть довольно трудно. Следует ли использовать "кнопку" HTML тег? Или, может быть, пункт теги? Какие части должна ссылка обернуть вокруг?

Оказывается, что самый простой и наиболее широко используемый синтаксис — это просто реализация простого старого якорного тега (кнопки формы часто используют «вход»). С функциональной точки зрения, все, что мы действительно пытаемся создать это ссылка, которая, при нажатии, принимает нас куда-то новое, что именно то, что основные HTML ссылку делает. Часто в веб-дизайне выбор превратить что-то в кнопку является лишь эстетическим и не обязательно указывает на какую-либо особую функциональность.

Вот широко используемый фрагмент HTML, который получает работу отлично, оставаясь красивым и кратким:

Если вам не нужен Div, не используйте один

Одна из проблем, с которой я сталкивался, когда я впервые начал кодирование, заключается в том, что я часто думаю, что мне нужен div, чтобы создать что-либо. Используя эту несовершенную логику, я бы обернуть мой якорь в div, а затем применить большую часть стиля div.

Это совершенно ненужным, хотя и может создать проблемы как с щелчком мыши и наведении. В приведеном выше примере, весь наш элемент будет ссылка. Если мы завернули это в div и стиле, что только текстовая часть кнопки будет ссылка, а это означает, что пользователь может предположительно нажать на кнопку без результата.

Зачем использовать класс?

Возможно, самое важное, что нужно заметить об этом фрагменте кода, это то, что мы добавили класс, который я в целом назвал "кнопкой". Для этого есть несколько причин.

Прежде всего, нам нужен способ таргетинга и стиль этой кнопки в нашем CSS, не обязательно ориентации всех якорных тегов на странице. Это почти никогда не бывает, что вы хотите, чтобы каждая ссылка будет идентичной кнопки. Тем не менее, это возможно и вполне вероятно, что вы на самом деле хотите повторно использовать стиль кнопки в какой-то момент. По этой причине мы применяем класс вместо удостоверения личности. Таким образом, всякий раз, когда мы хотим преобразовать простую текстовую ссылку на хорошую кнопку, мы просто применяем наш класс "кнопки", и мы сделали!

Шаг 1 Предварительный просмотр

На данный момент вы должны иметь только простую текстовую ссылку с укладкой по умолчанию.

Шаг 2: Основные стили кнопки

Теперь, когда у нас есть наш HTML все готово к работе, пришло время перейти к CSS. Помните, что мы создали класс "кнопки" для явной цели таргетинга CSS, поэтому не забудьте использовать его для этого шага:

Первое, что мы хотим сделать в нашей CSS определить основные окна, которые будут составляют нашу форму кнопки. Вот стили, которые я использовал. Обратите внимание, что мой выбор цвета и размеры совершенно необязательны, не стесняйтесь использовать все, что вам нравится.

Самое главное, что я сделал здесь, чтобы установить "дисплей" на "блок". Это позволит нам превратить нашу текстовую ссылку в большую коробку с определенной шириной и высотой. После этого я просто установить мой размер и цвет фона, а затем добавил границы. Я буду использовать "rgba" совсем немного, если вы хотите сделать это немного более дружественным к старым браузерам, проверить эту статью об объявлении rgba обратных.

Шаг 2 Предварительный просмотр

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

Шаг 3: Текстовые стили

Далее, пришло время атаковать этот уродливый текст. Чтобы убедиться, что вы можете идти в ногу с каждым шагом, я просто продолжать добавлять к тому, что мы ранее построили с комментариями, чтобы помочь вам увидеть каждый шаг:

Здесь мы видим, что я добавил в текстовом цвете, что по существу темнее оттенок цвета кнопки. Этот трюк достигается путем установки цвета текста на черный и снижения непрозрачности через rgba. Далее, я центр выровнены текст и объявить кучу вещей с помощью шрифта сокращение.

Сокращение шрифта

Сокращение CSS является аккуратным способом объявить кучу свойств CSS и стилей в одной строке. Во-первых, я объявил вес (смелый), то шрифт размера / линии высоты и, наконец, шрифт-семьи. Обратите внимание, что высота линии устанавливается именно на высоту кнопки. Это простой способ убедиться, что ваш текст вертикально по центру.

Для получения дополнительной информации о CSS Shorthand, проверить 6 CSS Сокращение хитрости каждый разработчик должен знать.

Шаг 3 Предварительный просмотр

После третий шаг ваша кнопка должна на самом деле начать выглядеть как кнопка!

Шаг 4: Причудливые стили CSS3

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

Мы можем легко увлечься и написать пятьдесят строк CSS, чтобы сделать нашу кнопку блестящей и красивой, но я буду держать его очень просто для сегодняшних целей:

Каждый из них может быть сложно читать так что давайте пройти через них один за другим. Во-первых, я добавил градиент, который использует цвет, который мы уже имели на месте и исчезает к чему-то крошечные темнее. Я оставил в моем предыдущем цвете фона выше этого раздела, чтобы выступать в качестве отката.

Далее идет радиус границы. Я решил пойти с очень тяжелым закругленным углом, который даст кнопке форму таблетки. Так как я хочу, чтобы все мои углы, чтобы быть одинаковым, я просто объявить одно значение, и он получает применяется равномерно.

Наконец, я бросил в некоторых теней. И коробка, и текстовая тень, которую я использовал, немного своеобразны. Для тени коробки, дал ему вертикальное смещение, но не горизонтальный, а также оставил перья на 0. Это даст хороший маленький искусственный 3D эффект, который не требует слишком много работы или кода. Для текстовой тени, я также применил вертикальное смещение и установить цвет на белый на 20% непрозрачность. Это супер простой способ создать эффект letterpressed и сделать текст появляются, как будто он погружается в кнопку.

Используйте префиксер для префиксов браузера

Обратите внимание, что вышеуказанный код вообще не совместим с кросс-браузером. На начальных стадиях экспериментов, я ненавижу mucking мой код с полдюжины префиксов браузера и часто забывают или нет данный браузер имеет уникальный синтаксис.

После того как я получил вещи, глядя так, как я хочу в эспрессо (мой выбор IDE) с помощью базового синтаксиса, я могу подыснуть все, что код в небольшой бесплатный инструмент под названием Prefixr, который будет обрабатывать его и выплюнуть мой код со всеми правильными доступными браузером конкретных версий автоматически добавлены.

Шаг 4 Предварительный просмотр

После шага 4, ваша кнопка должна выглядеть гораздо острее, чем раньше. Почти закончена!

Шаг 5: Наведите стили

Последний шаг в нашем процессе кнопки заключается в определении поведения наведении. Когда пользователь парит над кнопкой, это всегда приятно получить немного визуальной обратной связи, что больше, чем изменение курсора по умолчанию. Еще раз, мы могли бы пойти на все с этим, но я буду держать его простым и просто облегчить градиент немного:

Теперь, когда вы парите над кнопкой, ее цвет / яркость будет сдвигаться. Это тонкий эффект, но, безусловно, достаточно сильны для любого пользователя, чтобы заметить, даже если они дальтоник.

Закончил!

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

Демо: Чтобы увидеть кнопку в действии, нажмите здесь или на изображении выше.
jsFiddle: Чтобы возиться с кодом, нажмите здесь.

Заключение

Сегодня мы узнали много очень важных вещей. Во-первых, мы увидели, что мы можем использовать основные HTML якорь теги в качестве отправной точки для нашей кнопки, и что это хорошо, чтобы стиль кнопки с многоразовыми классами. Мы также узнали, как начать с укладки основной кнопки, которая будет хорошо работать во всех браузерах и подыдать дополнительное чутье позже, а не основывать всю структуру кнопки на методах, которые не будут широко доступны. Наконец, мы увидели, как держать вещи простыми, кодируя с основными свойствами CSS3, пока мы не получим все в порядке, а затем следовать, что с поездкой в Префиксер, который расширяет наш код на что-то, как кросс-браузер совместимы, насколько это возможно.

Оставьте комментарий ниже, и дайте нам знать, что вы думаете. Если вы новичок, было ли это полезно для вас? Если вы опытный профессионал, что бы вы сделали по-другому?

Джошуа Джонсон