How to Make Responsive Buttons with CSS3

Mychelle Blake
Man working on computer

According to market researchers McKinsey & Company, 61% of Google users won't come back to a site they can't use properly on a smartphone, and of that group, 40% will visit a competitor's site. Starting in 2015, Google also began to rank mobile-friendly sites higher than non-responsive sites. As such, responsive design has become a "must have" for any professional website.

Using CSS3 to Make Responsive Buttons

Making a site mobile-friendly is actually quite simple, but it does involve additional work, particularly with your Cascading Style Sheet (CSS). Once you have created the code for your buttons, you then create "media queries" for the different sizes of devices that might be used to view your website.

A media query is basically a set of CSS code that adjusts the size of the elements on the page depending on the device screen size.

HTML Code Example

In the example below, some simple HTML code is provided for three buttons.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scales=1">

<link href="styles.css" rel="stylesheet">

</head>

<body>

<div id="buttonExamples">

<a href="http://www.lovetoknow.com" target="_blank" class="btn btn-blue">Button</a>

<a href="http://www.lovetoknow.com" target="_blank" class="btn btn-green">Button</a>

<a href="http://www.lovetoknow.com" target="_blank" class="btn btn-red">Button</a>

</div>

</body>

</html>

In the code above, "viewport" means the area of the page that is visible on a visitor's screen. This line of code is very important because a mobile device will not display responsive content without it.

CSS Code Example

The first step will be to create a class that styles all of the buttons. This example refers to this class as "btn."

.btn {

text-align: center;

text-decoration: none;

font-weight: bold;

font-size: 20px;

font-family: sans-serif, arial;

color: #ffffff;

border-radius: 10px;

padding: 15px 20px;

margin-right: 15px;

margin-left: 15px;

}

Three more classes below give each button a unique look. In this example, each button has a different background color: blue, green and red.

.btn-blue {

background-color: #2E86C1;

}

.btn-green {

background-color: #28B463;

}

.btn-red {

background-color: #FF0000;

}

A hover state is also created, which will turn the button backgrounds black when a mouse hovers over it.

a:hover {

background-color: #000000;

}

With this code linked to your HTML page, you can create three buttons as depicted below.

Three buttons created with HTML and CSS3.
Three buttons created with HTML and CSS3.
Three buttons created with HTML and CSS3. The first button is in hover state where the background changes to black.
Three buttons created with HTML and CSS3. The first button is in hover state where the background changes to black.

Making the Buttons Responsive

With the basic button design done, it is time to add in media queries.

There are many types of queries and a designer can get quite specific if they have the time and desire to do so. Every device has their own set of screen sizes, but it is often much easier to provide general break points that encompass most devices. These are demonstrated in the code below with the device indicated in the comment line above.

The query is designed to look at either one screen size range or between a range. For example, in the first query below, the query is for screens that are 320 pixels or smaller. In the second example for general smartphone sizing, the range is set to adapt to screens no smaller than 320 pixels and no larger than 480 pixels.

/* this is the typical dimensions for an iPhone */

@media only screen and (max-device-width: 320px) {

#buttonExamples {font-size: 150%;}

}

/* this is the typical dimensions for a smartphone */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

#buttonExamples {font-size: 150%;}

}

@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {

#buttonExamples {font-size: 150%;}

}

/* this is the typical dimensions for a medium sized device/desktop computer */

@media only screen and (min-device-width: 768px) and (max-device-width: 992px) {

#buttonExamples {font-size: 150%;}

}

/* this is the typical dimensions for a large screen*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1200px) {

#buttonExamples {font-size: 150%;}

}

You can use these breakpoints, which are the ones most commonly used by the popular HTML, CSS and Javascript framework Bootstrap, or you can play around with different sizes and styles based on your design.

Testing the Queries

It's important during the design and coding process to make sure that your queries work correctly. You can do this using the Google Chrome web browser.

  1. Open the website in Chrome.
  2. Right-click with your mouse to reveal a drop-down menu.
  3. Choose "Inspect."
  4. A horizontal split screen will appear at the bottom and the source code will be displayed.
  5. In the upper left corner, click on the second icon which looks like two rectangles of different sizes. This is used to test responsive elements. Refer tothe red arrow in the screenshot below.
Screenshot of using Inspect Element to view responsive buttons.
Using Inspect Element to view responsive buttons.

When the site is in responsive testing mode, a set of handles appears on the right side (see yellow arrow in image above) and by holding down the mouse, you can drag the screen to the size you want to test. The size width and height will appear at the top of the screen just below your Chrome navigation bar.

For example, here is a screen pulled to a size of 480 pixels wide. The buttons will become smaller as the screen size decreases, while still remaining readable. They will also increase in size as the screen is pulled wider.

Screenshot of using Inspect Element to view responsive buttons at 480 pixels wide.
Using Inspect Element to view responsive buttons at 480 pixels wide.

When you have completed testing, click the double rectangle icon again to exit responsive mode. Then, click the "x" on the upper right top area of the inspector window to close.

If during testing, the design does not appear correctly, it's time to go back to tinker with the CSS3 media queries until everything looks just right. This is why testing is a crucial part of the development process!

Another option for testing if your content, such as buttons, is mobile friendly is to use Google's free Mobile Friendly Test. It reviews a URL for its level of mobile responsiveness.

The Importance of Responsive Design

Learning how to use media queries and how to properly design a website to be responsive for mobile devices is a critical skill for any web developer. Use of mobile devices exceeds that of personal computers and laptops and this trend is only expected to increase in the future.

How to Make Responsive Buttons with CSS3