URL：https://ui-buttons.web.app/
It can be said that buttons are ubiquitous in web applications or websites. They are one of the most common elements in web pages and application interfaces, used to trigger various operations and interactions. However, in CSS, we can use various techniques to change the appearance and behavior of buttons, making them more flexible and easy to use. Perhaps you would say that using CSS to set styles for buttons to beautify their visual effects is a very simple thing.
Is it really like this? If your answer is not 100% certain, then you are right. You can also continue reading. In the following content, I will share some tips about buttons (some less common CSS) with you to help you better master CSS and show more creativity and possibilities in design.
Start with HTML first
From a semantic perspective, providing buttons for the web should use the HTML <button> element. However, many web developers do not pay much attention to HTML semantics. Therefore, in web applications or pages, you can see all kinds of HTML elements used to make buttons, such as:
<button>我是一个真按钮</button>
<input type="button" value="我也是一个按钮" />
<a href="">我是一个链接，我也被当作按钮使用</a>
<span>其实就只是一个HTML标签，我与按钮没半毛钱关系</span>Of course, the above example is just the tip of the iceberg, there are many other HTML tags used to make buttons, such as div , section , and so on.
If you habitually use non- <button> elements to build buttons during development, please consider the details related to A11Y. For example, add role , tabindex , and related ARIA attributes to elements:
<div id="save" tabindex="0" role="button" aria-pressed="false">save</div>This way, you can provide equal services to more people.
As we all know, a button is a widget that is used to perform actions, such as submitting a form, opening a dialog box, canceling an action, or executing a command, such as inserting a new record or displaying information. Add Add Add role = "button" Tells assistive technologies (e.g. screen readers) that the element ( div ) is a button, but does not provide button functionality (usually JavaScript is used to simulate the functionality of a button). This means that if you want the button to be a real button, use the native button tag, i.e. <button> or type for button 's <input> :
<button>我是一个真按钮</button>
<input type="button" value="我也是一个按钮" />Note that if you use role = "button" instead of semantic <button> or <input type = "button"> , you need to make this element focusable and define event handlers for click and keydown events. In short, you will have a lot of extra things to do, and I do not recommend using non- <button> tag elements to build buttons.
On the web, there is another controversy, which is that many links on the web have a UI appearance that looks like a button, so there is a discussion of “is it a button or a link?” If you want to learn more about this topic, please read @Chris Coyier’s article “A Complete Guide to Links and Buttons” , I will not elaborate on it here!
For accessibility reasons, we use button to make buttons:
<button type="submit" class="button">Submit</button>Reset button default style
If you use button controls to create buttons, such as <button> or <input type = "button"> , the user agent will set an initialized style for them. Take Chrome browser as an example:
/* User Agent Stylesheet */
button {
appearance: auto;
font-style: ;
font-variant-ligatures: ;
font-variant-caps: ;
font-variant-numeric: ;
font-variant-east-asian: ;
font-variant-alternates: ;
font-variant-position: ;
font-weight: ;
font-stretch: ;
font-size: ;
font-family: ;
font-optical-sizing: ;
font-size-adjust: ;
font-kerning: ;
font-feature-settings: ;
font-variation-settings: ;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;()
cursor: default;
box-sizing: border-box;
background-color: buttonface;
margin: 0em;
padding-block: 1px;
padding-inline: 6px;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
border-image: initial;
}
/* User Agent Stylesheet */
input {
font-style: ;
font-variant-ligatures: ;
font-variant-caps: ;
font-variant-numeric: ;
font-variant-east-asian: ;
font-variant-alternates: ;
font-variant-position: ;
font-weight: ;
font-stretch: ;
font-size: ;
font-family: ;
font-optical-sizing: ;
font-size-adjust: ;
font-kerning: ;
font-feature-settings: ;
font-variation-settings: ;
text-rendering: auto;
color: fieldtext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
cursor: text;
background-color: field;
margin: 0em;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
padding-block: 1px;
padding-inline: 2px;
}
input[type="button" i] {
appearance: auto;
user-select: none;
align-items: flex-start;()
text-align: center;
cursor: default;
box-sizing: border-box;
background-color: buttonface;
color: buttontext;
white-space: pre;
padding-block: 1px;
padding-inline: 6px;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
border-image: initial;
}The corresponding button style is as follows:
To make it easier to customize the UI style of a button, the appearance property is usually set to none :
.button {
appearance: none;
}The biggest advantage of doing this is that it can provide initialized UI styles for buttons based on the user’s operating system. At this time, the button styles you see on different operating systems and platforms will vary.
The above picture is based on the OS system in different browsers, the button is set to
apperance: noneUI effect!
If you want to style a button from scratch and worry about overriding the default style, you can use a simple and rough way to set the all property of the button to unset :
.button {
all: unset;
}In this way, the button will not have any UI effects.
CSS’s unset , inherit , initial and revert are collectively known as CSS explicit defaults, which make it easy to get a way to reset and continue property defaults:
If you are interested in this knowledge, I suggest you move to read the article “ CSS Explicit Defaults: inhert , initial , unset and revert “ in “ Modern CSS “!
Touch operation
Have you ever clicked a button repeatedly and the page unexpectedly zoomed in? If you want to avoid this, you can remove it with touch-action :
.button {
touch-action: manipulation;
}The manipulation value disables gestures such as "double-click to enlarge". Other gestures, such as "pan" and "pinch to enlarge", are not affected. An additional benefit is that the browser no longer needs to wait for the second click to delay the click event.
Someone suggested setting user-scalable in meta is viewport to none :
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">It should be noted that using user-scalable = no may cause inaccessibility issues for users with visual impairments (such as low vision). WCAG requires at least 2x scaling; however, the best practice is to enable 5x scaling. Therefore, it should be used with caution.
Hover and visual focus
Providing hover and focus styles for buttons is very important. It is worth mentioning here that when adding hover and focus styles to buttons at the same time, their order is very important.
When the hover style is added before the focus style, each style works fine. However, the problem arises when the focus style is placed before the hover style. When clicking on an element with the mouse, the focus style will not appear, only the hover style will be displayed.
The following is the correct order:
.button {
/* Default Style */
&:hover {
/* Hover Style*/
}
&:focus {
/* Focus Style */
}
}The focus style of the button has another detail. When interacting with the button, the focus ring can be obtained not only through interaction with the mouse, but also through interaction with the keyboard. Therefore, please do not forget to set the style of the focus ring obtained through keyboard interaction.
In CSS, you can style : focus (mouse interaction) and : focus-visible (keyboard interaction) differently in the following way:
button:focus:not(:focus-visible) {
outline: 2px dotted #416dea;
outline-offset: 2px;
box-shadow: 0px 1px 1px #416dea;
}
button:focus-visible {
outline: 2px solid #f35;
outline-offset: 2px;
box-shadow: 0px 1px 1px #416dea;
}In addition to : focus and : focus-visible , there is also a : focus-within in CSS, which can be used to set the focus ring style, but there are obvious differences between them. For more detailed information on this, you can read the article " CSS Focus Styles: : focus and : focus-visible "!
Minimum width of the button
To ensure that the button has the appropriate width, it is important to consider the length of the button content in advance and set a minimum width for it. By using the min-width property, you can help you determine the minimum width of the button.
Consider the following example, where some buttons have content of different lengths, including English and Arabic. If the text is short and no minimum width is set, the width of the button may become too small. This can be avoided by using min-width .
.button {
min-width: 104px;
}For more information on this, please refer to the following:
Font of the button
By default, form elements do not inherit the font-family of <html> or <body> elements. If you want buttons to inherit their font-family , the simplest solution is to reset the button's font-family property to inherit :
.button {
font-family: inherit;
}Button disabled state
To indicate that the button is disabled, we can add the disabled attribute to it and style it with CSS styles.
<button disabled></button>button[disabled] {
color: #d2d5db;
background: #6c7589;
cursor: not-allowed;
}When a button is disabled, it cannot be focused on by the keyboard, and it is removed from the accessibility tree.
Unexpected choice
Many web applications or websites will set the appearance of the link <a> to look like a button. Usually a shared class is used, such as .button or .btn :
<a class="button" href="/sign-in">Sign in</a>At this point, repeatedly clicking on it may be selected or highlighted. To avoid this phenomenon, you can set user-select to none :
.button {
user-select: none;
}Summary
The design of button styles is crucial for the appearance and User Experience of the web. With some tips, buttons can look more attractive, easy to understand, and operate. Here is a brief summary of button style tips:
First, hover and focus styles are designed to enhance button interactivity. By using the :hover , :focus , and :focus-visible pseudo-classes, we can add hover and focus style effects to the button, thereby improving user attention to the button and maintaining visibility during keyboard navigation.
Secondly, the minimum width of the button is to ensure that the button maintains a consistent appearance under different text lengths. By using the min-width property, we can set a minimum width for the button so that even if the button text content is short, the button will not appear too crowded or irregular.
Third, setting the font family can make the button text consistent with the overall style of the webpage. By setting the font-family property to inherit , the button text will inherit the font style defined in the webpage, ensuring that the button looks consistent with the webpage content.
Finally, the disabled state style can provide users with visual cues that the button is currently disabled. By defining the style for the [disabled] property selector, we can change the color, background, and mouse pointer style of the disabled state button, so that users can clearly identify the disabled button and avoid misoperation.
In summary, by applying these button style tips, we can create more attractive, user-friendly, and accessible buttons, thereby improving the User Experience and enhancing the overall quality of the webpage.
