CSS - Buttons

Basic Button Styles

Buttons are a part of web design, and understanding how to style them using CSS is a skill for any web developer. In this section, we'll look at the default browser button styles, how to remove them, and how to add basic styles to create custom button designs.

Default browser button styles vary between different browsers, but they generally include a border, background color, and padding. These default styles may not always match the design of your website, so it's common to remove them and start with a clean slate.

button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

Once you've removed the default styles, you can start adding your own basic styles to the button. Here are some common properties you can use:

button {
  color: #fff;
  background-color: #007bff;
  border: 2px solid #007bff;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
}

By removing the default browser styles and adding your own basic styles, you can create custom button designs that match your website's overall look and feel. In the next section, we'll look at how to style different button states to provide visual feedback to users.

Button States

Buttons are interactive elements that change appearance based on user actions. These different appearances are called "button states." In this section, you'll learn about the five common button states and how to style them using CSS.

The normal state is the default appearance of a button when it's not being interacted with. This is the base style you define for your button using the basic CSS properties covered in the previous section.

The hover state occurs when the user moves their mouse cursor over the button. To style the hover state, use the :hover pseudo-class in your CSS selector.

button:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

The active state is triggered when the user clicks on the button. To style the active state, use the :active pseudo-class in your CSS selector.

button:active {
  background-color: #004085;
  border-color: #004085;
  transform: translateY(1px);
}

The focus state occurs when the button is focused using the keyboard (e.g., by pressing the Tab key). To style the focus state, use the :focus pseudo-class.

button:focus {
  outline: 2px dotted #000;
  outline-offset: 2px;
}

The disabled state is used when a button is disabled and cannot be clicked. To style a disabled button, use the :disabled pseudo-class.

button:disabled {
  background-color: #ccc;
  border-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

By styling these different button states, you can provide visual feedback to users and make your buttons feel more interactive and responsive. In the next section, you'll learn how to create buttons with different shapes and sizes.

Button Shapes and Sizes

Buttons come in different shapes and sizes, so you can create designs that fit your website's style. This section shows how to make rectangular, rounded, and circular buttons, and change their sizes using CSS.

Rectangular buttons are the most common. By default, buttons are rectangular with sharp corners. To create a rectangular button, you don't need to add extra CSS properties beyond the basic styles.

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
}

This code makes a simple rectangular button with blue background, white text, and no border.

Rounded buttons have rounded corners, giving them a softer look. To create rounded buttons, use the border-radius property.

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 5px;
}

The border-radius property is set to 5 pixels, which rounds the corners of the button.

Circular buttons are buttons with a circular shape, often used for icons or social media links. To create a circular button, set the border-radius property to 50% and make sure the button has equal width and height.

button {
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 50%;
}

This code makes a circular button with a 50-pixel diameter, blue background, and white text.

To change button sizes, you can use the padding property to control the space between the button's content and its border, and the font-size property to set the size of the button's text.

button.small {
  padding: 5px 10px;
  font-size: 14px;
}

button.large {
  padding: 15px 30px;
  font-size: 20px;
}

This code makes two button classes: "small" and "large". The small button has less padding and a smaller font size, while the large button has more padding and a larger font size.

Button Colors and Gradients

Buttons can use different colors and gradients to grab attention, convey meaning, or match a website's branding. In this section, you'll learn how to create buttons with solid colors and gradients, and how to choose text colors that contrast well for readability.

Solid color buttons are buttons with a single, uniform background color. To create a solid color button, use the background-color property and set it to the desired color value.

button {
  padding: 10px 20px;
  background-color: #ff5500;
  color: #fff;
  border: none;
  font-size: 16px;
}

This code creates an orange button with white text. You can use any valid CSS color value, such as hex codes, RGB, or color keywords.

Gradient buttons use a gradual transition between two or more colors as their background. To create a gradient button, use the background-image property with the linear-gradient() function.

button {
  padding: 10px 20px;
  background-image: linear-gradient(to right, #ff5500, #ff9900);
  color: #fff;
  border: none;
  font-size: 16px;
}

This code creates a button with a linear gradient background that transitions from orange to a lighter orange from left to right. You can adjust the gradient direction, colors, and color stops to create different effects.

When choosing button colors, it's important to consider the text color to make sure it contrasts well with the background for readability. A general rule is to use light text on dark backgrounds and dark text on light backgrounds.

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
}

This code creates a button with a blue background and white text, which provides good contrast for readability.

If you're using a gradient background, choose a text color that contrasts well with the darkest part of the gradient to maintain readability.

button {
  padding: 10px 20px;
  background-image: linear-gradient(to right, #ff5500, #ff9900);
  color: #000;
  border: none;
  font-size: 16px;
}

In this example, black text is used to contrast with the orange gradient background.

Button Borders and Shadows

Adding borders to buttons makes them stand out and provides emphasis. To add a border, use the border property and set its width, style, and color.

button {
  padding: 10px 20px;
  background-color: #fff;
  color: #007bff;
  border: 2px solid #007bff;
  font-size: 16px;
}

This code creates a button with a 2-pixel solid blue border, a white background, and blue text. You can adjust the border width, style (e.g., solid, dashed, dotted), and color to achieve different looks.

To add depth to your buttons, use the box-shadow property. This property allows you to create shadows around the button, giving it a 3D-like appearance.

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

This code adds a subtle shadow to the button, creating a sense of depth. The box-shadow property takes four values: horizontal offset, vertical offset, blur radius, and color. In this example, the shadow is offset 4 pixels down, has a 6-pixel blur radius, and uses a semi-transparent black color.

You can combine borders and shadows to create even more visually appealing buttons. By using both properties together, you can emphasize the button's edges while also giving it depth.

button {
  padding: 10px 20px;
  background-color: #fff;
  color: #007bff;
  border: 2px solid #007bff;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

This code combines a 2-pixel solid blue border with a subtle shadow, creating a button that pops off the page. Experiment with different border and shadow styles to find the perfect combination for your design.

Button Icons and Labels

Add icons to buttons to help users quickly understand the button's purpose and make the user interface more intuitive. You can add icons using an <img> element or an icon font like Font Awesome. To add an icon to a button using Font Awesome:

1. Include the Font Awesome stylesheet in your HTML file
2. Add the classes to an <i> element inside the button

<button>
  <i class="fas fa-search"></i> Search
</button>

This code adds a search icon to the button using the Font Awesome classes fas (for solid style) and fa-search (for the search icon).

To position icons within buttons, use CSS flexbox or inline-block display. With flexbox, you can center the icon and label vertically and add space between them.

button {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
}

button i {
  margin-right: 5px;
}

This code sets the button's display property to flex, centers the items vertically with align-items: center, and adds a right margin to the icon to create space between the icon and label.

When styling button labels, consider the font size, weight, and color to make sure the text is easy to read and complements the button's design.

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: bold;
}

This code sets the button label's font size to 16 pixels and font weight to bold, making the text easy to read and prominent.

Button Groups and Toolbars

Button groups and toolbars organize related buttons, making them easy to find and use. In this section, you'll learn how to create button groups, style button toolbars, and adjust spacing and alignment of grouped buttons.

To group related buttons together, place them inside a container element, like a <div>, and give the container a class name that describes the group's purpose.

<div class="button-group">
  <button>Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>

This code creates a button group with three buttons inside a <div> container with the class button-group.

Button toolbars are rows of button groups used for related actions or options. To create a button toolbar, place multiple button groups inside a container element and style them to appear as a unit.

<div class="button-toolbar">
  <div class="button-group">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>
  <div class="button-group">
    <button>Left Align</button>
    <button>Center Align</button>
    <button>Right Align</button>
  </div>
</div>

This code creates a button toolbar with two button groups, one for text formatting and another for text alignment.

To adjust the spacing and alignment of button groups, use CSS properties like margin, padding, and display: flex.

.button-group {
  display: flex;
}

.button-group button {
  margin-right: 5px;
}

.button-group button:last-child {
  margin-right: 0;
}

.button-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

This CSS code does the following:

Responsive Button Design

When designing buttons for websites, consider how they will look and function on different screen sizes. In this section, you'll learn how to create responsive buttons that adapt to various devices, from desktop computers to mobile phones.

One key aspect of responsive button design is adjusting button sizes for different screen sizes. On larger screens, buttons can be bigger to make them easier to click and more prominent. On smaller screens, buttons should be smaller to fit the available space while still being easy to tap.

To adjust button sizes based on screen size, use CSS media queries. Media queries allow you to apply different styles depending on the device's screen width or other characteristics.

button {
  padding: 10px 20px;
  font-size: 16px;
}

@media (max-width: 768px) {
  button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

This code sets a default button size with 10 pixels of vertical padding, 20 pixels of horizontal padding, and a font size of 16 pixels. For screens up to 768 pixels wide (tablets and large phones), the button size is reduced to 8 pixels of vertical padding, 16 pixels of horizontal padding, and a font size of 14 pixels. For screens up to 480 pixels wide (small phones), the button size is further reduced to 6 pixels of vertical padding, 12 pixels of horizontal padding, and a font size of 12 pixels.

When designing responsive buttons, also consider touch targets on mobile devices. Touch targets are the areas around buttons that respond to touch input. To make buttons easy to tap on mobile devices, ensure that touch targets are large enough and have enough space between them.

According to the Web Content Accessibility Guidelines (WCAG), touch targets should be at least 44x44 pixels in size. To achieve this, add padding around buttons and set minimum sizes for clickable elements.

button {
  padding: 10px 20px;
  font-size: 16px;
  min-width: 44px;
  min-height: 44px;
}

button + button {
  margin-left: 10px;
}

This code sets a minimum width and height of 44 pixels for buttons, ensuring that they meet the WCAG recommendation for touch target size. The CSS rule button + button adds a left margin of 10 pixels between adjacent buttons, providing space between touch targets to prevent accidental taps.