Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Complete Guide to Creating Stunning CSS Button Style

Buttons are important design elements of modern web development. If you have a form on your website, you’ll likely need to include a button for users to submit the form.

By default, the buttons are unstyled when you add it to your HTML template. However, you can style your button elements with the right CSS styles.

In this tutorial, we’ll show you how to style buttons in CSS. We’ll cover basic concepts like adding background color, changing text color, and border radius. Then we’ll proceed to explain advanced concepts like managing styles for different button states. Excited? Let’s begin.

Understanding CSS Button Style

Before we proceed to style buttons in CSS, it’s essential to understand the HTML button element. Knowing the available elements and features will help us to know the aspect of the button that are customizable. Below, we’ll explain the available components of a button element.

Components of a Button

Buttons are essential elements in web development that provide users with interactive elements to perform actions. To understand how to style buttons with CSS, it’s crucial to break down their components:

  1. Text: The text inside a button is a key element that can be styled using color, font-size, and font-weight properties.

  2. Background: The background of a button can be styled using the background-color property.

  3. Border: The border of a button can be customized using properties such as border-width, border-color, and border-radius.

  4. Pseudo-classes: Pseudo-classes allow you to style buttons based on their state. The most common three states include :hover, :active, and :focus.

If you prefer using premade templates for your button component, check out PureCode’s library of over 10k components, including form and button components.

Get Started With PureCode

Basic Button Styling

Button styling in CSS involves customizing various aspects such as background color, text color, size, and border style. Below is a detailed explanation with practical examples for each customization option:

Background Color

To set the background color of a button, you can use the background-color property. Choose a color that suits your design. Here’s an example:

.button {
  background-color: #3498db; /* Blue background color */
}

Text Color

Adjusting the text color is done using the color property. Ensure there is enough contrast between the background and text for readability. Here’s an example.

.button {
  color: #ffffff; /* White text color */
}

Size

You can control the size of the button by adjusting the padding property. This will increase or decrease the space inside the button, affecting its overall size.

.button {
  padding: 10px 20px; /* Adjust padding for size */
}

Border Style

Customizing the border involves using properties like border, border-width, border-color, and border-radius. These properties control the border style, width, color, and border corner radius respectively. This is the concept we use to create outline style buttons in CSS. Here is an example.

.button {
  border: 2px solid #3498db; /* Blue border */
  border-radius: 10px; /* Rounded corners */
  background-color: #fff; /* White background color */
  color: #3498db; /* blue text color */
}
Outlined button

Now, let’s combine these customization options to style a basic button:

HTML:

<button class="button">Click me</button>

CSS:

.button {
  background-color: #3498db; /* Blue background color */
  color: #ffffff; /* White text color */
  padding: 10px 20px; /* Adjust padding for size */
  border: 2px solid #3498db; /* Blue border */
  border-radius: 5px; /* Border radius property to add rounded corners */
  cursor: pointer; /* Changes cursor to pointer when button is hovered */
}

This CSS code styles a button with a blue background, white text, a padding of 10 pixels at the top and bottom, and 20 pixels on the left and right. It also adds a 2-pixel solid blue border, and rounded corners with a 5-pixel radius.

Styled CSS Button

Advanced Button Styling Techniques

Aside from the basic button styles we covered above, you can include some advanced styles to make your buttons visually appealing and interactive to users. Below are some of the advanced styling features.

Button States (Active, Focus, Hover)

Active State:

The active state represents the moment a user clicks on the button. To style the button when clicked, you’ll need to use the :active pseudo-class. Here is a basic example:

.button:active {
  background-color: #2c3e50; /* Darker background color on click */
  border-color: #2c3e50; /* Darker border color on click */
}

Focus State:

The focus state is crucial for keyboard navigation. To style the button when it gains focus (e.g., when you press the tab key to focus on the button), use the :focus pseudo-class. For example:

.button:focus {
  outline: 2px solid #3498db; /* Add an outline on focus */
  box-shadow: 0 0 5px #3498db; /* Add a subtle box shadow on focus */
}

Hover State:

The hover state is for when the user hovers the mouse over the button. It’s an opportunity to provide visual feedback. Here is an example:

.button:hover {
  background-color: #2980b9; /* Lighter background color on hover */
  border-color: #2980b9; /* Lighter border color on hover */
}

CSS Animations and Transitions

To make your button interactive, you can add animations and transition property to it. This concept gives your page a modern look and feel as though it uses JavaScript.

Transitions:

Transitions create smooth changes over a specified duration. They are commonly used for hover effects, focus styles, and state transitions. It gives a gradual change, providing a polished and subtle user experience.

.button {
  transition: background-color 0.3s ease; /* Smooth transition on background color */
}

.button:hover {
  background-color: #3498db; /* New background color on hover */
}

In this example, the transition property is utilized to create a smooth color transition when the button is hovered, providing a polished and engaging effect.

Animations:

Animations allow for more complex and dynamic effects. They are ideal for creating attention-grabbing effects, such as pulsating or bouncing buttons. It provides greater control over the timing and sequence of style changes.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.button {
  animation: pulse 2s infinite; /* Apply the pulse animation */
}

Here, the @keyframes rule is used to define a pulse animation. The animation property applies it to the button, creating a pulsating effect that repeats indefinitely.

Box Shadows and Gradients

Another useful CSS button style is the box shadow and gradient property.

Box Shadows:

Box shadows add depth and dimension to the button. The code snippet below demonstrates how to add a subtle box shadow to the button:

.button {
  box-shadow: 2px 2px 5px #888888; /* Add a subtle box shadow */
}

By adjusting the values in the box-shadow property, you can control the shadow’s position, blur, and color, providing a sense of elevation.

button with box shadow

Gradients:

Gradients create smooth color transitions. The following code snippet applies a gradient background to the button:

.button {
  background: linear-gradient(to right, #3498db, #2980b9); /* Gradient background */
  border: none;
}

This gradient background adds a visually appealing color transition from left to right, enhancing the button’s aesthetic.

button with gradiant background

Responsive Button Designs

Responsive web design is an approach to designing and building websites that ensures optimal viewing and interaction experiences across a wide range of devices and screen sizes.

The goal is to create a flexible and adaptive layout that adjusts seamlessly to different resolutions, orientations, and devices, including desktops, tablets, and smartphones.

When it comes to styling buttons in CSS within the context of responsive web design, several key considerations come into play:

Fluid Width

Creating fluid-width buttons ensures responsiveness. The code snippet below sets the button to take up the full width of its container:

.button {
  width: 100%; /* Full width for responsiveness */
  max-width: 300px; /* Maximum width for larger screens */
}

By setting the width property to 100%, the button adjusts its size based on the container’s width. The max-width ensures the button doesn’t exceed a specified maximum width on larger screens.

Media Queries

Media queries allow for responsive design adjustments. The following code snippet shows how to change the font size for smaller screens:

@media (max-width: 600px) {
  .button {
    font-size: 14px; /* Adjust font size for smaller screens */
  }
}

Here, the font size is reduced when the screen width is 600 pixels or less, ensuring optimal readability on smaller devices.

To learn more about styling buttons, check out the video below.

Button Accessibility Best Practices

Ensuring accessibility in CSS button design is crucial to make web content usable and navigable for all users, including those with disabilities. Here are some best practices for CSS button accessibility:

Use Semantic HTML

Always use semantic HTML elements, such as <button>, to create buttons. Semantic elements convey meaning to assistive technologies and improve the overall accessibility of your content.

<button>Click me</button>

Provide Descriptive Text

Include descriptive and concise text within the button to clearly convey its purpose. This benefits screen readers who rely on text-to-speech technology to navigate the web.

<button>Submit Form</button>

Contrast and Color Choices

Ensure sufficient color contrast between the button text and background to make it readable for users with low vision or color blindness. Follow WCAG (Web Content Accessibility Guidelines) standards for color contrast.

.button {
  color: #ffffff; /* White text color */
  background-color: #007bff; /* Blue background color */
}

Keyboard Focus Styles

Provide clear and visible focus styles for keyboard navigation. This helps users who navigate the web using only the keyboard. The :focus pseudo-class can be used to define focus styles.

.button:focus {
  outline: 2px solid #007bff; /* Blue outline on focus */
}

Avoid Solely Relying on Color

Do not rely solely on color to convey information. Use additional visual cues, such as icons or text, to supplement color-coded information. This ensures that users who cannot perceive color can still understand the content.

Accessible Button States

Consider different states of a button (hover, active, focus) and ensure that each state is visually distinguishable. This enhances the user experience for those with different interaction modes.

.button:hover {
  /* Hover state styles */
}

.button:active {
  /* Active state styles */
}

ARIA Roles and Attributes

Utilize ARIA (Accessible Rich Internet Applications) roles and attributes to provide additional information to assistive technologies. For example, use the aria-label attribute to give a button a descriptive label.

<button aria-label="Close">X</button>

Button Frameworks and Libraries

CSS frameworks are powerful tools that offer pre-designed and pre-styled components, including buttons, to streamline web development.

Below, we’ll cover three popular CSS frameworks: Bootstrap, Material UI, and Tailwind CSS.

Bootstrap

Bootstrap is one of the most widely used CSS frameworks, providing a comprehensive set of UI components. It includes a flexible grid system, responsive utilities, and a variety of pre-styled components, including buttons. Bootstrap buttons come with default styles, sizes, and color variations.

Bootstrap button example

Material UI

Material UI is a CSS framework that follows the Material Design guidelines of Google. It offers a modern and visually appealing design. MUI is primarily used with React, providing React components, but the styles can be used in non-React projects as well. Material UI buttons have a distinct design with subtle animations and ripple effects.

MUI button example

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. It offers a unique approach, allowing for highly customizable designs without writing custom CSS. Tailwind CSS buttons are created by combining utility classes for various styles.

Tailwind CSS button example

For more details, see our tutorial to learn how to style buttons using Tailwind CSS.

CSS-only Icon Buttons

Styling icon-only buttons with text using CSS provides a visually engaging and informative way to enhance user interactions.

To create a button that includes an icon, you’ll simply need to nest the icon you want to use in between the button component. Here is an example.

For this example, we’ll create a button that includes the font awesome search icon. Here’s the HTML template we’ll be using.

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

Next, we’ll use the .icon-button class to style both the icon and the button in our CSS file.

.icon-button {
  background-color: #3498db; /* Button background color */
  color: #ffffff; /* Button text color */
  border: none; /* Remove default button border */
  padding: 10px 20px; /* Adjust padding for size */
  border-radius: 5px; /* Add rounded corners */
  cursor: pointer; /* Change cursor on hover for interactivity */
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.icon-button i {
  margin-right: 5px; /* Add space between icon and text */
}

This CSS styles a button with a Font Awesome search icon and the text “Search”. You can customize the button style to suit your specifications.

Button with icon and text

If you’d like, you can change the color or size of the icon on the button element. Since the icon is nested between the button tag, we can target it as a child component.

.icon-button i {
  margin-right: 5px; /* Add space between icon and text */
  color: #c2eb52; /* Change icon color */
  font-size: 20px; /* change font size */
}

Frequently Asked Questions

These are answers to some of the top questions developers ask about styling buttons in CSS.

How do I create a CSS button with a gradient background?

To create a CSS button with a gradient background, you can use the linear-gradient property. Here’s an example:

.button {
  background: linear-gradient(to right, #3498db, #2980b9); /* Gradient background */
  color: #ffffff; /* Text color */
  padding: 10px 20px; /* Padding for size */
  border: none; /* Remove border for a cleaner look */
  border-radius: 5px; /* Rounded corners */
}

Adjust the color values and other properties to match your design preferences.

Can you style buttons in CSS?

Yes, you can style buttons in CSS by applying various properties such as background color, color, padding, border, and more. Here’s a basic example:

.button {
  background-color: #3498db; /* Background color */
  color: #ffffff; /* Text color */
  padding: 10px 20px; /* Padding for size */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  text-transform: uppercase; /* Uppercase for texts */
}

Feel free to customize the styles based on your design requirements.

What’s the best approach for creating responsive buttons?

For creating responsive buttons, set the button’s width to 100% for full responsiveness, and use max-width to control the size on larger screens. Here’s an example:

.button {
  width: 100%; /* Full width for responsiveness */
  max-width: 300px; /* Maximum width for larger screens */
  /* Other styling properties */
}

This ensures that the button adjusts its size based on the screen width while maintaining a maximum width for larger displays.

How do you style a clicked button in CSS?

To style a button when it’s clicked, you can use the :active pseudo-class. Here’s an example:

.button:active {
  background-color: #2c3e50; /* New background color on click */
  color: #ffffff; /* New text color on click */
}

This will apply the specified styles when the button is clicked.

Which CSS framework is recommended for quickly implementing stylish buttons?

Bootstrap is a widely recommended CSS framework for quickly implementing stylish buttons. It provides a set of pre-styled components, including buttons, that you can easily integrate into your project. Here’s an example of using a Bootstrap button:

<button class="btn btn-primary">Primary Button</button>

Other frameworks like Material UI and Tailwind CSS also offer pre-styled buttons and are worth exploring based on your specific design preferences and project requirements.

Creating Responsive Button Element

Buttons are important elements of modern websites. They are used to trigger submit events on forms on your website. In addition, they also improve the overall design of your web page.

In this tutorial, we covered the basics of styling buttons in CSS. Features like adding a background color, border radius, padding, and changing text color. We also explained some advanced concepts like using pseudo-classes to style the various states of the button.

When styling your buttons, ensure you test them on various browsers such as Firefox and Google Chrome to ensure they look as you’d expect.

If you’d like to speed up your development time, we recommend checking out PureCode. PureCode allows you to add custom themes to your projects built using CSS3, Tailwind CSS, or Material UI. Check our marketplace; choose from over 10,000 AI-generated custom components.

Further Reading:

To learn more about building responsive websites, check out the following tutorials.

Also check out the video below to learn more advanced ways to style button in CSS. Happy coding!

David Ozokoye

David Ozokoye

Software Engineer and Technical Writer