Buttons and Icons
Styling hyperlinks as faux buttons with solid colour, gradient or transparent backgrounds, and adding Font Awesome icons to buttons.
WEB DESIGN COURSE
THIS TUTORIAL
At the end of this Tutorial, you will be able to:
- Style hyperlinks as faux buttons with solid colour, gradient or transparent backgrounds.
- Apply soft corners and rounded edges to faux buttons.
- Add Font Awesome icons to faux buttons.
You can view the finished version of the sample web page you will create in this Tutorial by clicking the image below. The finished sample will open in a new tab of your web browser.
About buttons on web pages
Buttons on web pages can be of two types:
- Real buttons: These connect user actions to back-end software that runs on the webserver. For example, they may submit a request to process an order, join an online service or subscribe to email list. Real buttons are part of a form and can be created with the HTML button tag.
- Faux buttons: These are just hyperlinks styled with CSS to look like real buttons. Their purpose is to gain the user’s attention and are typically used to create what marketers term calls-to-action.
Below you can see the home page of Twitter. Neither of the two buttons are ‘real’ buttons connected to any backend server process.
The Sign up button does not sign you in to Twiiter. And the Log in button does not log you in.
Each button is just a hyperlink that leads to a different web page where you can perform that specific server-based action.
Creating your sample files
In this Tutorial, you will update a copy of a sample web page and stylesheet you created in the previous Working with Sections Tutorial.
- In VS Code, open the page-11.html web page in your �� websites/exercises sub-folder and save it with this new name: buttons-icons.html
- Open the style-11.css stylesheet in your �� websites/exercises/assets/css sub-folder and save it with this new name: buttons-icons.css
- In the new buttons-icons.html file, rename the linked stylesheet from style-11.css to buttons-icons.css and save the web page.
- Finally, in the web buttons-icons.html page, replace the current title and description details with the following:
This web page includes an image file named three-staff.jpg. You already have this in your �� websites/exercises/assets/img sub-folder.
Adding the buttons to your web page
Follow these steps to add three faux buttons to your sample buttons-icons.html web page.
- In VS Code, scroll to between the two text paragraphs in the second section block. This has a h2 sub-heading named “Section Heading Two” and a light-coloured background. Press the Enter key a few times to open up some empty lines.
- To this space, copy-and-paste the following three <p> paragraph tags, each one containing a sample hyperlink.
- Save the buttons-icons.html web page and view it in your browser.
You can see that the three hyperlinks appear as ‘ordinary’ hyperlinks. You have not yet created the faux button styles that will make them display as buttons.
Note that the vertical spacing between the hyperlinks is the result of the margin-bottom style rule of their surrounding <p> paragraph tags.
The <a> hyperlink tag, like the <b> bold and <i> italic tags, creates an inline element.
- The <a> hyperlink tag does not force a line-break before or after it.
- You cannot assign any margin value to an <a> hyperlink tag, to push other elements away from it, either vertically (above or below) or horizontally (left or right).
Creating the button styles
Next, follow the steps below to create classes with style rules for the faux buttons on your web page.
- In VS Code, display the buttons-icons.css stylesheet, and scroll down to the end, to just above the /* == UTILITY CLASSES === */ block.
- Copy-and-paste the following new classes and their style rules. You will apply this general-purpose .btn to all faux buttons, regardless of their type. (The style rules within comments are available for when you want your button text to appear in all upper-case characters.) Save your stylesheet.
- Switch to the buttons-icons.html web page, add the btn class to all three hyperlinks, and save the file. See below.
- Next, switch back to the buttons-icons.css stylesheet. Copy-and-paste the three classes below.
- The first class ( .btn-solid ) is for when you want to style your buttons with a solid color background.
- The second ( .btn-gradient ) is for when you want your buttons to have a colour gradient background.
- And the third ( .btn-ghost ) is for ghost (transparent background) buttons.
Each of the three classes has two groups of styles: one for the button’s passive state and one for its interactive state. When finished, save your buttons-icons.css stylesheet.
- Switch back to the buttons-icons.html web page and apply the three classes to the hyperlinks as shown below. When finished, save the web page.
- Display the web page in your browser. The hyperlinks-as-buttons should now look as shown below. Hover over the buttons with your mouse to view the interactive states of the buttons.
Click here to view a finished sample of this web page as it should now look.
Creating button corner styles
By default, all three button classes you created have square corners. To add some visual variety, create two more corner styles. Here are the steps.
- In VS Code, display the buttons-icons.css stylesheet.
- Under the three button-related classes you have already added, copy-and-paste these two new ones. When finished, save your stylesheet.
- In your web page, add the two new classes: one to the second button, and the other to the third button. See below.
- Save your web page and view the result in your browser. It should now look as shown below.
Click here to view a finished sample of this web page as it should now look.
Adding Font Awesome icons
Font Awesome is widely-used option for adding icons buttons on web pages. Follow the steps below to add icons from Font Awesome to your sample web page.
- In VS Code, display your buttons-icons.html file.
- In the head block, just before the closing </head> tag, copy-and-paste the following comment line and code. This adds the Font Awesome stylesheet to your web page.
- Use your web browser to go to this web address: https://fontawesome.com/
- Click the option named Icons in the menu bar across the top of the screen.
- On the next page displayed, you can use the Search box to locate icons by name from the Font Awesome range of 1,535+ free icons. For example, in the Search box, enter the word: user and click the result displayed below.
- On the next screen displayed, you can see the HTML code to generate the ‘user’ icon. Just click once on the code to copy it. The HTML icon code will look as follows.
- You can now copy-and-paste this or other selected icons to your web pages.
- In your buttons-icons.html web page, locate the second of the three hyperlink buttons.
- Click just before the ‘Sign Up’ text, paste the HTML code you copied from Font Awesome, and then press the Spacebar key just after the icon code.
- Save and view your buttons-icons.html. Your second of three button-styled hyperlinks should look similar to the following.
- Next, return to Font Awesome, and search for the following icon: shopping cart
- From the list of search results displayed, click the first one. .
- On the next screen displayed, click the HTML code to copy it. .
- In your buttons-icons.html web page, locate the first of your three hyperlink buttons.
- Click just before the ‘Order Now’ text, paste the HTML code you copied from Font Awesome, and then press the Spacebar key once after the pasted code.
- Next, return to Font Awesome, and search for the following icon: right arrow
- Click to select one of the options returned. For example, this one. .
- Copy-and-paste the icon code to just before the text of your third hyperlink button, and then press the Spacebar key once.
- Save and view your buttons-icons.html file. Your three button-styled hyperlinks should look similar to the following.
You have now successfully added Font Awesome icons to your web page.
Click here to view a finished sample of this web page as it should now look.
Adding spacing to icons in your buttons
Within your hyperlink buttons, the single space between the text and the icons, created by pressing the Spacebar key once, is not enough. More spacing is needed.
You could type several spaces simply by pressing the Spacebar multiple times. But the web browser will combine multiple empty spaces into a single space. So that is not a solution.
One option is to type the special HTML code that forces an empty space. This is the non-breaking space character. You type this as follows:
For example, in your first hyperlink button, you could type three non-breaking space characters before your button text as shown below.
Inside each button, between the icon code and the text, you have four spaces.
- One space is the result of pressing the Spacebar .
- The other three are created by the three character codes.
Your button will now display as follows in your web browser.
Unfortunately, adding lots of codes to text can cause problems when your web page is displayed on mobile-sized screens.
The better solution is to use CSS to add a margin-right spacing value to your icons. Here are the steps.
- In your buttons-icons.html web page, remove any codes you may have added inside your hyperlink buttons. You can leave the single, blank space you typed by pressing the Spacebar key.
- Switch to your buttons-icons.css stylesheet, and copy-and-paste the following after all your other button styles.
- Save your web page and stylesheet. Your web page should now look as follows.
That’s it. You have now successfully added spacing to icons within your button-styled hyperlinks.
Click buttons-icons.html to view a finished sample of this web page in a new tab of your web browser.
Positioning buttons
In the sample web page, your three buttons all appear on different lines, with some vertical space separating them. This is because each button is wrapped in a <p> tag with a margin-bottom value set in the stylesheet.
To control the spacing around and between buttons, you can enclose them in a flexbox-based div container. Here are the steps.
- In your sample web page, replace all three buttons by copy-and-pasting the followning. When finished, save your web page.
- In your stylsheet, at the top of the block that contains your button classes, copy-and-paste the new class below. When finished, save your stylesheet.
- View the result in your web browser, on both non-mobile and mobile viewports. Your web page should now look as shown below.
- To centre-align your buttons on non-mobile screens, uncomment the line below.
- To centre-align your buttons on mobile screens, uncomment the line below.
Even if adding just a single faux button to a web page, always enclose the button inside a container-btn tag.
✅ That’s it. You have now successfully completed this Tutorial.
Click here to view a finished sample of this web page in a new tab of your web browser.
Updating your website home page
Now that you have updated and styled a new web page, let’s add a hyperlink to it on the ‘home page’ of your web site. Follow the steps below:
- In VS Code, open this HTML file in your ‘main’ websites folder: index.html
- Copy-and-paste the following new line to your web page at end of the current list of web pages.
Save your index.html web page and view the result in your browser.
Uploading your files to GitHub
After finishing your web page and stylesheet, you are now ready to upload them to your account on GitHub.
- Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
- On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
- On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
- From the dropdown list displayed, choose the option Upload files.
- In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your index.html file and your �� exercises sub-folder to upload them to your repository on GitHub.
- Scroll down to the bottom of the GitHub screen, and accept or edit the short message ( Add files via upload ) in the Commit changes box.
- Finally, click the green Commit changes button to upload your files.
Your updated home page and sample web page are now published on GitHub at web addresses similar to the following:
https://username.github.io/index.html
https://username.github.io/exercises/buttons-icons.html
It may take a few minutes for your uploaded files to appear on GitHub.
Site Map
Web Design Course
An online course that covers the fundamentals of modern web design with HTML5 and CSS3. Developed and delivered by Brendan Munnelly.
Стилизация старого доброго элемента button
Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег <button></button> может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.
Стили, применяемые к кнопкам по умолчанию
Может, разговор о «стандартных стилях» покажется кому-то обсуждением каких-то элементарных вещей, но, на самом деле, поговорить об этом довольно интересно. Вот стандартная таблица стилей для кнопок из пользовательского агента Google Chrome.
А вот как выглядит стандартная кнопка, при выводе которой стили по умолчанию не менялись.
Простая кнопка, к которой применены стандартные стили
Для начала переопределим свойство appearance . Оно используется для стилизации, характерной для конкретной платформы. Внешний вид кнопки при таком подходе основан на стилях, применяемых в операционной системе пользователя.
Теперь, после сброса свойства appearance , взглянем на то, как кнопки выглядят в разных браузерах.
Свойство appearance этих кнопок установлено в none
Далее, прежде чем мы перейдём, собственно, к стилизации, нам нужно сбросить ещё некоторые свойства. Это — border , border-radius , background .
Кнопка после сброса свойств
Теперь, когда мы сбросили стандартные стили кнопки, пришло время двигаться дальше. А именно, я хочу рассказать о том, как стилизовать кнопки, основываясь требованиях, предъявляемых к их дизайну.
Стилизация обычных кнопок
Начнём с базового примера, поговорив о стилизации обычных кнопок, на которых выводится лишь текст. На следующем рисунке представлена «анатомия» обычной кнопки.
Цвет текста (Text Color), размер шрифта (Font Size), фон (Background), скругление углов (Roundness), внутренний отступ (Padding)
Имея вышеприведённый CSS-код, мы можем получить кнопку, похожую на ту, которая показана на предыдущем рисунке. После того, как базовый стиль кнопки задан, нужно позаботиться о внешнем виде кнопки в различных состояниях.
Обычное состояние кнопки (Normal), получение фокуса (Focus), наведение на кнопку указателя мыши (Hover), отключение кнопки (Disabled)
▍Стили, применяемые к кнопкам при наведении на них мыши и при получении ими фокуса
Для того чтобы указать пользователю на то, что на кнопку наведён указатель мыши, важно оснастить кнопку стилем, рассчитанным на это событие. То же самое касается и изменения внешнего вида кнопки при получении ей фокуса в ситуации, когда со страницей работает пользователь, применяющий клавиатуру.
Этот материал указывает на то, что важен порядок добавления стилей, применяемых к кнопке при наведении на неё мыши ( hover ) и при получении ей фокуса ( focus ).
Когда стиль hover добавляют до стиля focus , все стили работают правильно. Проблема появляется тогда, когда стиль focus добавляют до стиля hover . Когда элемент щёлкают мышью, стиль focus никак себя не проявляет, видимым оказывается лишь представление кнопки, определяемое стилем hover .
Хорошо, если сначала идёт стиль hover, а потом — стиль focus
Вот как выглядит правильный порядок описания стилей:
▍Минимальная ширина кнопки
Для того чтобы кнопка хорошо выглядела, она должна иметь определённую ширину. Важно заранее об этом подумать и принять во внимание длинные и короткие надписи, которые могут содержаться на кнопках. Благодаря свойству min-width можно установить минимальную ширину кнопки. Вот моя статья, где в подробностях обсуждается это и другие подобные свойства.
Взгляните на следующий рисунок. Там можно видеть несколько кнопок, содержащих надписи разной длины на английском и арабском языках. Если не задавать минимальную ширину кнопки, кнопка, когда надпись на ней будет короткой, окажется слишком маленькой. Лучше этого не допускать и пользоваться свойством min-width .
Стоит задавать свойство кнопок min-width
▍Внутренние отступы
Привлекательной может выглядеть идея, в соответствии с которой кнопкам не назначают горизонтальные внутренние отступы. Ведь кнопки имеют определённую ширину, а значит — между краями кнопок и надписями, содержащимися на них, будет достаточно места. Так? Нет, не так. Реализация этой идеи может иметь негативные последствия в тех случаях, когда надпись на кнопке меняется.
Взглянем на следующий рисунок.
Рекомендовано назначать кнопкам внутренние отступы
Обратите внимание на то, что если кнопке не назначены внутренние отступы, надпись, расположенная на ней, может очень близко подходить к краям. Даже в том случае, если у кнопки есть свойство min-width . В нижней части рисунка используется и свойство padding , и свойство min-width . Это даёт больше уверенности в том, что кнопка будет хорошо выглядеть в ситуации, когда заранее неизвестна длина выводимой на ней надписи.
▍Семейство шрифта, используемого для надписей, расположенных на кнопках
Элементы форм, по умолчанию, не наследуют семейство шрифта, назначенное элементам <html> или <body> . Интересно заметить, что я написал 70% этой статьи и понял, что, во-первых, не поменял шрифт кнопки, используемой в демонстрационных целях, и, во-вторых, ничего об этом не написал.
Для решения этой проблемы свойство font-family должно быть установлено в значение inherit .
▍Стилизация отключённых кнопок
Для того чтобы указать пользователю на то, что кнопка отключена, к ней можно добавить атрибут disabled и стилизовать кнопку средствами CSS.
Вот HTML-код, описывающий отключённую кнопку:
Вот CSS-код стилизации такой кнопки:
Когда кнопка отключена, она не может получить фокус с клавиатуры и удаляется из дерева доступности элементов страницы.
▍Внешний вид указателя мыши при наведении его на кнопку
Стандартный указатель мыши, наведённый на кнопку, выглядит как стрелка. Мне нравится этот ответ на StackOverflow: «Кнопки — это традиционный элемент управления настольных программ. Это — среда, в которой указатель в виде руки никогда не использовался до наступления эры интернета. Когда на веб-страницах стали применять тот же самый элемент управления, разработчики просто пытались сделать так, чтобы кнопки выглядели так же, как в настольных приложениях».
Для того чтобы переопределить обычное поведение указателя, рекомендовано поменять стандартный курсор-стрелку на курсор в виде руки.
Стандартный курсор-стрелка и улучшенный курсор в виде руки.
Теперь, когда мы обсудили базовые вопросы стилизации кнопок, приведём полный CSS-код, включающий в себя всё то, чего мы коснулись выше:
В следующих разделах мы поговорим о разных стилях и типах кнопок, которые вы можете использовать в своих проектах.
Кнопки со значком
Иногда нужно, чтобы на кнопке был бы некий значок. Это может понадобиться для того, чтобы выделить кнопку, или чтобы лучше проинформировать пользователя о роли кнопки. Важно, чтобы кнопки со значками были бы доступны пользователям с ограниченными возможностями.
Примеры кнопок со значками
На предыдущем изображении имеются кнопки со значками. Ниже показан код, в котором к значку добавлен атрибут aria-hidden , что позволяет убрать его из дерева доступности. Я так же добавил атрибут focusable="false" для того чтобы значок не получал бы фокус в IE.
Обратите внимание на то, что я воспользовался стилем vertical-align: middle для того чтобы выровнять значок и содержимое кнопки по вертикали.
Вот HTML-код кнопки, о которой идёт речь:
То, что мы только что рассмотрели, может работать до тех пор, пока мы не решим скрыть текст кнопки и сделать её кнопкой, на которой находится только значок. Как это сделать? Сначала текст надо обернуть, например, в элемент span . Затем можно заняться дальнейшим улучшением внешнего вида кнопки. Вот HTML-описание кнопки:
Может показаться, что теперь достаточно просто скрыть элемент span и дело будет сделано:
Хотя при таком подходе текст пропадает, а значок остаётся, это очень плохо в плане доступности контента. Кнопку уже «не видят» инструменты для чтения с экрана. Например, VoiceOver в macOS сообщает о том, что такая кнопка — это просто «Button», без каких-либо подробностей о ней. У этой проблемы есть несколько решений.
▍Использование SVG-значков
Я предпочитаю пользоваться SVG-значками. Рекомендуется собирать все SVG-описания графических элементов в один файл и подключать каждый значок в теге <svg> с использованием элемента <use> . Вот пример:
Здесь показан код SVG-значка, описание которого хранится в файле icons.svg и имеет идентификатор #facebook . Этот подход позволяет снизить уровень дублирования кода.
▍Настройка размеров кнопки со значком
Так как текст кнопки больше не виден, и при этом для кнопки задано CSS-свойство min-width , ширина кнопки не будет соответствовать размеру значка. Для того чтобы учесть эту особенность, лучше в явном виде задать ширину кнопки со значком.
Кнопка, у которой задано CSS-свойство min-width, и кнопка, у которой это свойство не задано
▍Визуальное скрытие текста
Элемент, с помощью популярного класса .sr-only , можно скрыть визуально, убрав с экрана, но оставив доступным для средств чтения с экрана.
▍Установка размера шрифта в 0
Если установить свойство font-size в значение 0 , то элемент span не будет занимать вообще никакого места на экране. То есть он будет скрыт.
Но тут я склоняюсь к решению, предусматривающему использование класса .sr-only . С моей точки зрения оно выглядит более логичным. Приём скрытия текста путём установки размера шрифта в 0, как мне кажется, похож на некий хак.
▍Использование атрибута aria-label
Если в кнопке нет элемента <span> , тогда должен быть способ обойтись и без него. Один из таких способов заключается в использовании атрибута aria-label . Атрибут либо назначают самому элементу <button> , либо — элементу <svg> .
Если вы хотите больше узнать о кнопках со значками — взгляните на этот материал.
Кнопки, содержащие несколько строк текста
В некоторых случаях может понадобиться, чтобы кнопка содержала бы две строки текста. Ниже показан пример такой кнопки.
Кнопка, содержащая две строки текста
Тут показана кнопка для формы подписки, содержащая основной и вспомогательный текст. Как сделать такую кнопку и при этом не забыть о её доступности для людей с ограниченными возможностями? Вот соответствующий HTML-код:
Средство для чтения с экрана «озвучит» эту кнопку как «Subscribe to our newsletter 240K+ subscribers». Когда пользователь это услышит, это его может запутать, так как ничто не будет разделять две строки текста, выводимые на кнопке. Взгляните на скриншот инструмента Chrome для исследования доступности элементов.
Исследование доступности элементов в Chrome
Для того чтобы не путать пользователей, я предпочёл бы скрыть вторую строку текста от средств для чтения с экрана. Сделать это можно, использовав атрибут aria-hidden в соответствующем элементе <span> :
Если по какой-то причине изменить HTML-разметку нельзя, есть и другой способ добавления дополнительного текста на кнопку. Решение этой проблемы, которое показалось мне интересным, я нашёл на сайте Smashing Magazine. Оно заключается в том, чтобы размещать содержимое, пользуясь псевдоэлементами. При таком подходе средства для чтения с экрана не будут видеть ничего лишнего. Вот CSS-код этого решения:
Ссылки (<a>) или кнопки (<button>)?
Когда стоит пользоваться ссылками, а когда — кнопками? Для начала давайте поговорим о том, чем они отличаются друг от друга.
▍Ссылки
Тег <a> представляет собой гиперссылку, которая позволяет перейти на другую страницу веб-сайта или перейти к определённому разделу страницы, просматриваемой пользователем. Совместно с тегом <a> можно использовать четыре псевдокласса: :hover , :focus , :active и :visited . Если рассматривать ссылки с точки зрения доступности, то надо сказать, что взаимодействовать с ними можно, используя клавишу Enter на клавиатуре. Ссылки «озвучивают» и средства для чтения с экрана.
▍Кнопки
Элемент <button type="button"> сам по себе, без подключения к нему JavaScript-кода, не выполняет никаких действий. С ним можно использовать псевдоклассы :hover , :focus и :active . Если говорить о доступности, то с кнопкой можно взаимодействовать с помощью клавиатурных клавиш Enter и Пробел . Средства для чтения с экрана «читают» содержимое кнопок.
Если вспомнить о дизайне, то случается так, что веб-страница содержит кнопки одного и того же стиля, различающиеся в плане используемого для их описания HTML-кода. С учётом этого CSS-код для стилизации класса .c-button должен быть написан так, чтобы его можно было бы использовать и для элементов <button> , и для элементов <a> . Рассмотрим следующий пример.
Использование ссылок и кнопок
Обратите внимание на то, что «кнопки» на странице стилизованы одинаково. Однако первая из них — это, на самом деле, элемент <a> , а вторая — это элемент <button> . Это означает, что кнопка необязательно выглядит в HTML как элемент <button> .
Тут имеется два дополнения к стилю .c-button . Это — свойства text-decoration: none; и text-align: center; . По умолчанию текст ссылок подчёркивается, поэтому мы хотим это изменить благодаря стилизации используемого класса. Кроме того, нам важно центрировать содержимое кнопки в тех случаях, когда для описания кнопки используется HTML-элемент, отличный от <button> .
▍Элемент <button> не обязан выглядеть как кнопка
Мне нравится этот пример, в котором, с учётом требований доступности контента, реализована панель-«аккордеон». Вначале, если представить, что JavaScript недоступен, результат рендеринга разметки выглядит так, как показано ниже.
Материалы страницы в условиях недоступности JavaScript
Вот HTML-код фрагмента такой разметки:
В случае доступности JavaScript вышеприведённая разметка позволит описать элементы, которые могут сворачиваться и раскрываться. Достигается это путём создания кнопки и добавления её в элемент <h2> .
Материалы страницы в условиях, когда JavaScript-функциональность доступна
В данном случае можно сказать, что использование элемента <button> — это правильный выбор, так как кнопка решает задачу разворачивания и сворачивания блоков текста.
▍Кнопка загрузки
Предположим, у нас имеется некий документ. Нам надо описать ссылку для его загрузки. Какой элемент стоит использовать для решения этой задачи? Тут нам на помощь придёт ссылка! Если добавить к ссылке атрибут download , при щелчке на неё будет инициирована загрузка соответствующих материалов.
Ссылка для загрузки документа, оформленная как кнопка
Вот код этой ссылки:
При таком подходе в нашем распоряжении оказывается ссылка, стилизованная как кнопка, которая делает своё дело, используя лишь семантические структуры HTML.
Кнопки с обводкой
Обычная кнопка при наведении на неё мыши становится кнопкой с обводкой
На предыдущем рисунке показана кнопка, которая становится кнопкой с обводкой при наведении на неё мыши. Какой способ лучше всего использовать для реализации подобного изменения внешнего вида кнопки? Для начала, стиль кнопки должен включать в себя свойство border , в котором, по умолчанию, используется прозрачный цвет. Предусмотрев такое свойство, мы делаем так, чтобы границы кнопки, при наведении на неё мыши, не перерисовывались бы.
Благодаря такому подходу в нашем распоряжении оказывается кнопка, вокруг которой, при наведении на неё мыши, выводятся её границы. При этом фон кнопки становится прозрачным.
Градиентные кнопки
Когда я работал над статьёй о позиционировании элементов, мне понадобилась кнопка с градиентным заполнением.
Мне было нужно нечто, подобное следующему рисунку.
Градиентная кнопка и её вариант с обводкой
Тут представлены два варианта кнопки — градиентная кнопка и кнопка с обводкой. Для того чтобы добиться такого внешнего вида кнопки, мне нужно было, чтобы у базовой (градиентной) кнопки имелась бы прозрачная граница. Эта граница будет показана только для кнопки с обводкой.
Тут всё, вроде бы, выглядит разумно, но в ходе работы я столкнулся со странной проблемой. Я даже попытался решить её, попросив помощи у пользователей Twitter. Эта проблема представлена на следующем рисунке.
Обычная кнопка, кнопка с градиентом (граница, на самом деле, прозрачная; цветом она выведена лишь для наглядности), кнопка со странными краями
Теперь, когда мы разобрались с тем, как выглядит градиентная кнопка с прозрачной границей, позвольте мне рассказать о причинах вышеописанных странностей.
У каждого элемента есть свойство background-origin , определяющее область позиционирования фонового рисунка, которое по умолчанию установлено в значение padding-box . При таком подходе размер градиента подбирается так, чтобы он соответствовал бы размеру элемента с учётом толщины границы.
Я попробовал добавить к кнопке широкую границу для того чтобы понаблюдать за тем, что из этого получится. Обратите внимание на то, как повторяется градиент, и на то, что его размер соответствует свойству padding кнопки.
Кнопка с широкими границами и градиент
Для решения этой проблемы область позиционирования фонового рисунка нужно задать, воспользовавшись стилем background-origin: border-box; , изменив стандартное значение padding-box на border-box :
Вот, если хотите поэкспериментировать, пример на CodePen.
Что лучше — height или padding?
У каждой кнопки есть высота. Управлять высотой кнопки можно, либо задавая в явном виде её свойство height , либо задавая свойство padding для верхней и нижней сторон кнопки. Обратите внимание на то, что проблемы, о которых мы будем говорить ниже, характерны, в основном, для элементов <a> .
▍Фиксированная высота
Предположим, что у нас имеется кнопка, стилизованная следующим образом:
При таком подходе текст не выравнивается по центру. Выглядит всё это так, как показано ниже.
Кнопка, текст которой не выровнен по центру
Для того чтобы это исправить и выровнять текст, можно либо воспользоваться свойством padding , либо — свойством line-height . Устанавливая line-height в значение, равное или близкое к высоте кнопки, мы сможем выровнять текст по центру.
Но у этого метода есть минусы:
- Не гарантировано то, что текст кнопки всегда будет правильно выровнен по центру. При изменении шрифта его выравнивание может быть нарушено.
- При увеличении значения, задаваемого свойством font-size , нужно подбирать новое значение для свойства line-height .
- Свойство line-height может работать по-разному для текстов, выводимых на разных языках. Это актуально для многоязычных сайтов.
- Если имеется кнопка с двумя строками текста — этот метод для выравнивания содержимого кнопки не подходит.
▍Вертикальный внутренний отступ
Если задают одинаковые значения для свойств padding-top и padding-bottom , то ожидают, что содержимое кнопки будет выровнено по центру. Так оно и есть? На самом деле, это зависит от конкретной ситуации.
Существуют шрифты, которые центруются очень хорошо. А есть такие, которые ведут себя иначе. Иногда для достижения цели одно из значений вертикального внутреннего отступа нужно немного изменить. Взгляните на следующую кнопку.
Попытка центровки текста кнопки
Вот CSS-код стилизации этой кнопки:
В этом случае содержимое кнопки выглядит слегка смещённым. Значение верхнего внутреннего отступа нужно немного уменьшить:
Оборачивание содержимого кнопки в тег <span>
В ходе экспериментов я выяснил, что центровка текста кнопок Adobe немного сбита. Вот как это выглядит.
Центровка немного сбита
Я исследовал эти кнопки и заметил интересный паттерн. Содержимое обёрнуто в элемент <span> с указанием фиксированной высоты для кнопки.
Для элемента <button> элемент <span> , по умолчанию, выравнивается по центру. Когда высота меняется, содержимое центрируется автоматически, без необходимости использования свойства padding или чего-нибудь ещё. Вот анимированная демонстрация этого поведения.
Изменение высоты кнопки и автоматическое центрирование её содержимого
Правда, если речь идёт о ссылке, выглядящей как кнопка, тогда элемент <span> нужно выравнивать по центру. Для того чтобы учесть эту особенность, можно использовать способ компоновки элементов flexbox .
Вот и всё. Хочу отметить, что при написании данного раздела мне помогла эта статья.
Кнопки внутри flexbox- или grid-контейнеров
Тут у вас может появиться вопрос о том, какое отношение кнопки имеют к flex- и grid-макетам. Позвольте мне прояснить этот вопрос.
Я работал над разделом одного проекта. Мне нужно было вертикально центрировать его содержимое. Поэтому я использовал flex-макет:
То, что у меня получилось, меня несколько удивило.
Результат использования flex-макета
По умолчанию каждый flex-элемент растягивается в пределах ширины родительского элемента. Именно это и произошло с кнопкой, представленной на предыдущем рисунке. Для того чтобы избежать этой неприятности, нужно настроить свойство align-self :
Вот как кнопка будет выглядеть после этого.
Кнопка выглядит гораздо лучше
Ещё одна распространённая проблема возникает в ситуации, когда кнопка помещена во flex-контейнер, в котором, по умолчанию, задано свойство flex-direction: row . Высота кнопки будет подогнана под высоту родительского элемента. Для того чтобы исправить эту проблему, нужно использовать свойство кнопки align-self или свойство flex-контейнера align-items .
Кнопка, растянутая по высоте
Задавая выравнивание кнопки относительно центра контейнера, мы решаем проблему. Вот как теперь будет выглядеть тот же пример.
Решение проблемы растянутой кнопки
Использование единиц измерения em
Единицу измерения em можно использовать для правильной настройки размеров кнопок. Эта единица измерения в такой ситуации весьма полезна. Единица измерения em равна font-size элемента ( px или rem ). Взглянем на следующий пример:
В данном случае значение padding равно 16 * 0.5 px .
Предположим, что в проекте используются кнопки трёх размеров: обычные, средние, и большие. Когда для указания значений padding , width , height , margin используются единицы измерения em , это позволяет создавать кнопки, размеры которых очень легко менять. Вот как это выглядит.
Кнопки разных размеров
А вот фрагменты CSS-кода, в котором используется единица измерения em :
Для кнопок разного типа нужно создать классы, в которых задаётся разный размер шрифта:
→ Вот пример использования подобных кнопок на CodePen
→ Вот моя статья на эту тему. Рекомендую с ней ознакомиться
Анимация и переходы
Для того чтобы пользователю было бы приятнее работать со страницей важно подумать о том, чтобы при наведении мыши на кнопку использовался бы некий переход. Проще всего это сделать, организовав изменение цвета фона. Вот пример на CodePen, где можно увидеть реализацию этой идеи.
Итоги
Мне было очень приятно работать над этим материалом. Его написание заняло у меня больше года. Я счастлив от того, что он, наконец, опубликован. Надеюсь, вы нашли здесь что-то такое, что вам пригодится.
Уважаемые читатели! Известны ли вам какие-нибудь полезные способы работы с кнопками, которые остались за рамками этой статьи?
CSS Buttons — Кнопки
Используйте свойство background-color для изменения цвета фона кнопки:
Пример
Размеры кнопок
Используйте свойство font-size для изменения размера шрифта кнопки:
Пример
Используйте свойство padding для изменения заполнения кнопки:
10px 24px 12px 28px 14px 40px 32px 16px 16px
Пример
Закругленные кнопки
Используйте свойство border-radius для добавления скругленных углов к кнопке:
Пример
Цветные границы кнопок
Используйте свойство border , чтобы добавить цветную рамку к кнопке:
Пример
Наведите кнопки
Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.
Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:
Пример
.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>
.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.
Кнопки теней
Use the box-shadow property to add shadows to a button:
Пример
.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>
.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>
Отключенные кнопки
Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).
Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:
Пример
Ширина кнопки
По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:
Пример
Группы кнопок
Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:
Пример
Группа кнопок на границе
Используйте свойство border для создания группы кнопок с рамками:
Пример
Вертикальная группа кнопок
Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:
Пример
Кнопка на картинке
Button
How to Change Button Color on Click in CSS
Button is a clickable element used to perform a specific action. Using CSS, you can set different styles of buttons one of them is to change the color of a button on click. The color of a button can be set using the CSS “:active” pseudo-class.
This blog will teach you the procedure related to changing the button color on click. For this, firstly, learn about the :active pseudo-class.
What is “:active” in CSS?
Changing button color on click in CSS is possible with the help of the “:active” pseudo-class. In HTML, it indicates an element that is being activated when the user clicks on it. Moreover, when using a mouse, the activation starts when the mouse key is pressed.
Syntax
“a” refers to the HTML element on which the :active class will be applied.
Let’s head towards an example to understand the stated concept.
How to Change Button Color on Click in CSS?
To change the color of a button on click, first, create a button in an HTML file and assign the class name “btn”.
HTML
Next, in CSS, set the color of the button. To do so, we will use “.btn” to access the button and set the color of the button as “rgb(0, 255, 213)”.
CSS
background-color : rgb ( 0 , 255 , 213 ) ;
After that, apply :active pseudo-class on the button as “.btn:active” and set the color of the button that will show in its active state as “rgb(123, 180, 17)”:
background-color : rgb ( 123 , 180 , 17 ) ;
This will show the following outcome:
Now, let’s add the heading with <h1> tag and button class name “button”, inside the <center> tag.
HTML
Next, we will move to CSS and style the button and apply :active on it. To do so, we will set the border style as “none” and give padding as “15px”. After that, set the color of the button text as “rgb(50, 0, 54)” and its background as “rgb(177, 110, 149)”, and its radius as “15px”:
color : rgb ( 50 , 0 , 54 ) ;
background-color : rgb ( 177 , 110 , 149 ) ;
This will show the following outcome:
After that, we will apply :active pseudo-class on the button as “.button:active” and set the color of a button as “rgb(200, 255, 0)”:
background-color : rgb ( 200 , 255 , 0 ) ;
Once you implement all of the above code, go to the HTML file and execute it to check out the result:
From the output, it can be observed when the button is clicked its color is changed according to the specified RGB color code.
Conclusion
To change the button color on click in CSS, the “:active” pseudo-class can be used. More specifically, it can represent the button element when it gets activated. Using this class, you can set different button colors when the mouse clicks on it. This article explained the procedure for changing button color on click in CSS.
About the author
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.