Web page button design: three styles and CSS implementation

This article was updated on July 9, 2016 and has replaced the <a></a> tag with <button></button> tag to comply with modern accessibility best practices. If you are working on buttons, always stick to the <button></button> tag.

The

buttons are one of the most important components of any web page, and they have many different states and functions, all of which need to be matched correctly with previous design decisions. In this article, we will introduce three button design concepts, along with CSS code and tools to help new developers create their own buttons.

Before delving into various button design concepts, we need to review some basic knowledge of CSS buttons. If you don't know which CSS components will change, it makes no sense to understand the difference in thinking between flattened UI and Material Design.

Let's quickly review the basics of CSS buttons.

Key Points

• Using <button></button> tags is a recommended way to handle buttons in modern accessibility best practices.
• A good button design should ensure accessibility, the button should be easily accessible to people with disabilities and users using older browsers, and should contain simple text so that the user can immediately understand the purpose of the button.
The three main basic elements of
• button design are color, shadows, and transition time, which can be operated using CSS pseudo-classes such as :hover and :active.
• This article provides examples of three button styles: simple black and white buttons, flat UI buttons, and Material Design buttons, each with its own unique design method.
• To create your own button design, it is recommended to use tools like CSS3 Button Generator.

CSS button basics

The definition of good buttons varies from website to website, but there are some non-technical standards:

1. Accessibility – This is the most important thing. The button should be easy to access by people with disabilities and users using older browsers. The openness of the network is beautiful, don't destroy it with careless CSS.
2. Simple text – Keep the text inside the button short and clear. The user should be able to understand immediately what the button is and where it will take them.

Almost all buttons you see online use some variations of color changes, conversion times, and borders and shadow changes. These can be exploited using various CSS pseudo-classes. We will focus on two of them - :hover and :active. :hover Pseudo-class defines how CSS should change when the mouse hovers over an object. :active Most often performed between the user pressing the mouse button and releasing the mouse button.

The entire display of a button can be changed using a pseudo-class, but this is not a user-friendly approach. A good strategy for beginners is to make small or simple changes to the basic elements of the button while keeping the button familiar. The three main basic elements of a button are color, shadows, and conversion time.

Basic Element 1—Color

This is the most common change. We can change the colors of various attributes, the simplest attributes are color, background-color and border properties. Before we jump to the example, let's focus first on how to select the button color:

1. Color combination – Use complementary colors. Colorhexa is an excellent tool to find out which colors can be used together. If you're still looking for colors, check out the Flat UI color picker.
2. Match your palette – It is usually best to match any palette you are using. If you're still looking for a color palette, check out lolcolors.

Basic Element 2—Shadow

box-shadow Allows you to add shadows around objects. A unique shadow can be added to each side, and the flattened UI and Material Design take advantage of the idea. To learn more about box-shadow, please check the MDN box-shadow documentation.

Basic Element 3—Transition Duration

transition-duration Allows you to add time scales for CSS changes. A button without a conversion time will be immediately changed to its :hover CSS, which may be offensive to the user. Many of the buttons in this guide use the conversion time to create a natural feel.

The following example converts button style in a soft way (over 0.5 seconds) when :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

The code to run the conversion is complicated, so the old browsers handle the conversion slightly differently. Therefore, we need to include vendor prefixes for older browsers.

transition-duration: 0.5s /* 這是標準的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

Delete the default button style

To remove the default browser styles from the <button> elements so that we can provide them with custom styles, we include the following CSS:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

However, it is better to apply it to classes on button elements, rather than to all buttons by default.

There are many complex and interesting ways to modify how to change your CSS, and this quick review covers only the basics.

Three button styles

1 — Simple black and white buttons

This is usually the first button I add in my side project because its simplicity works in a wide variety of styles. This style utilizes the natural perfect contrast of black and white.

These two changes are very similar, so we will only introduce the code with a black button with a white background. To get another button, just flip each white and black.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

In the style above, you will see the font and background-color change in both directions over the duration of the conversion. This is a very simple example. To build from here, you can use the colors of your favorite brand as inspiration. Using BrandColors is a great way to find colors of this type of brand. .2s

2 — Flat UI button

Flat UI focuses on minimalism and tells a big story through small actions. Once my project starts to take shape, I usually migrate from the black and white button to the flattened UI button. The flat UI buttons are simple enough to fit into most designs.

Let's improve our previous buttons by adding button movements to simulate 3D buttons.

This example contains five buttons, but since the only change is the color, we will focus on the first button.

transition-duration: 0.5s /* 這是標準的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

This button has three states: General (stateless name),

and :hover. :active

It is worth noting that

only contains one line of code to reduce opacity. This is a useful trick to make the button look lighter without you finding a new, actually lighter color. :hover

CSS variables are not new, but some are used in new ways.

is not a solid uniform line, but uses border, border-bottom and border-left to create 3D depth effects. border-right

Flat UI buttons are widely used

. When our example button becomes :active, two things happen. :active

1. Change from 3px to 1px. This causes the shadow below the button to shrink and move the entire button object down by several pixels. Although simple, this one change helps the user feel that they are clicking the button into the page. border-bottom
The color changes. The background color becomes dark, simulating the movement physically away from the user and entering the page. Again, this subtle change reminds the user that they are clicking a button.

Flat UI buttons value simple and minimal movements that tell big stories. Many use

to create shallow motion. It is worth noting that some flat UI buttons do not move at all, only taking advantage of color changes. border-bottom

3 — Material Design

Material Design is a design concept that promotes information cards and features compelling actions. Google designed the concept of "Material Design" and listed three main principles on the Material Design homepage:

Material is a metaphor
Bold, graphic, purposeful
Sports give meaning

To better understand these three principles, let's take a look at the practical application of Material Design.

Note: This example does not include the tag because it follows Polymer's button default tag, but if you implement Polymer in a large project, it's worth exploring the use of the <button> tag in your implementation Instead of the <button> tag. We will explore this in more detail in future articles. <a>

These buttons utilize two main ideas - box-shadow and Polymer.

Polymer is a framework of components and tools to help design websites. If you are familiar with Bootstrap, Polymer is very similar. The powerful ripple effect found above can be added in just one line of code.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<paper-ripple fit></paper-ripple> is a Polymer component. By importing Polymer at the beginning of HTML, we can access popular frameworks and their components. Learn more on the Polymer project homepage.

Now that we understand what Polymer is and where the ripples come from (how it works is another story), let's discuss CSS that helps implement Material Design principles to make the button stand out.

transition-duration: 0.5s /* 這是標準的，并且適用于大多數(shù)現(xiàn)代瀏覽器 */
-webkit-transition-duration: 0.5s; /* 幫助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 幫助Firefox */

These buttons use box-shadow to achieve most of the design. Let's look at how box-shadow changes and plays its magic by removing any CSS that doesn't change:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

box-shadow Used to place a thin shadow on the left and bottom of each button. When clicked, the shadows extend further and become less dark. This action simulates the 3D shadow of the button jumping from the page to the user. This action is part of Material Design styles and their practical application principles.

Material Design buttons can be made by combining Polymer with box-shadow effects.

• Material is a metaphor—by using box-shadow, we can simulate 3D shadows that appear in real-world objects
• Bold, graphic, purposeful – this is more realistic for bright blue and green buttons, and these buttons completely satisfy that.
• Movement gives meaning – Using Polymer and box-shadow conversions, we can create a lot of motion when the user clicks a button.

This article describes how to use three different design methods to make buttons. If you want to make your own button design prototype, I recommend using CSS3 Button Generator.

Conclusion

Black and white buttons are simple and reliable. Replace black and white with the colors of your brand to get quick access to buttons related to your website. Flat UI buttons are simple and use small actions and colors to tell big stories. The Material Design button uses massive complex actions to simulate the shadows of the real world, thereby attracting users' attention.

Hope this guide will help CSS beginners understand the building blocks that make buttons so powerful and creative.

Frequently Asked Questions about Modern CSS Buttons

How to create a simple CSS button?

Creating a simple CSS button involves defining a class in your CSS file and applying it to button elements in the HTML file. For example, you can define a .button class in a CSS file that contains attributes such as background-color, color, border, padding, text-align, text-decoration, display, cursor, .button, .button, and

, etc. . Then, in the HTML file, you can create a button element and apply the

class to it. This will style the button according to the properties defined in the

class.

:hoverHow to add a hover effect to the CSS button? :hover

You can use the

pseudo-class to add a hover effect to the CSS button. This pseudo-class is used to select and set the style of the element when the user pointer hovers over it. For example, when the user pointer hovers over it, you can change the background color and text color of the button by defining these properties in the

pseudo-class of the button class.

How to create a CSS button with an icon?

CSS buttons with icons can be created by using icon fonts or SVG icons. Icon fonts such as Font Awesome provide a variety of icons that are easy to style with CSS. To use icon fonts, you need to include the CSS file of the icon font in the HTML file, and then use the corresponding class of the icon you want to use. On the other hand, SVG icons can be embedded directly into HTML files and styled using CSS.

linear-gradient()How to create a CSS button with gradient? radial-gradient()

CSS buttons with gradients can be created using the

function or the

function. These functions are used to define linear gradients or radial gradients, respectively. A gradient is defined by two or more color stop points that are the colors in which the gradient converts. The color stop point is defined by the color and the color position along the gradient line.

border-radiusHow to create CSS buttons with rounded corners? border-radius

CSS buttons with rounded corners can be created using the

attribute. This property is used to define the radius of the border corner. The value of the

attribute can be specified in pixels or percentages. A higher value will create a more rounded corner.

box-shadowHow to create a CSS button with shadow? box-shadow

CSS buttons with shadows can be created using the

attribute. This property is used to apply shadow effects to elements. The

property takes multiple values, including the horizontal offset of the shadow, the vertical offset, the blur radius, the extended radius, and the color.

transitionHow to create a CSS button with transition? transition

CSS buttons with transitions can be created using the attribute. This property is used to control the speed at which the user changes from one style to another when he hoveres over a button or clicks a button. Attributes take multiple values, including the attribute to be converted, the duration of the conversion, the timing function, and the delay.

How to create CSS buttons with animations?

CSS buttons with animations can be created using animation properties and keyframes rules. The animation attribute is used to specify the name, duration, timing function, delay, number of iterations, direction, fill mode, and playback status of the animation. The keyframes rule is used to specify styles for each stage of the animation.

How to create responsive CSS buttons?

Responsive CSS buttons can be created using media queries. Media queries are used to apply different styles for different devices or screen sizes. For example, you can define a media query that changes the size, fill, and font size of buttons for screens with widths of less than 600 pixels.

How to create CSS buttons with different shapes?

CSS buttons with different shapes can be created using the border-radius attributes and transform attributes. The border-radius property can be used to create circular or oval buttons. The transform property can be used to rotate, zoom, tilt, or pan buttons.

The above is the detailed content of An Introduction to the Basics of Modern CSS Buttons. For more information, please follow other related articles on the PHP Chinese website!