For working professionals
For fresh graduates
Study abroad
More

Button CSS

Updated on 02/03/20241,734 Views

Table of Content

Introduction

A button is a very integral element of every web page as it helps to generate user interaction. Activating a button requires the use of technical and connected devices such as a mouse and a keyboard. The button can also be activated with the help of voice commands or a finger click or other assistive device.

Generally, button CSS is used to submit forms, open dialogue boxes, submit reports, send replies, and so on. This tutorial will help you to understand how to add a button including the various three methods that are listed below:

By using a <button> tag
By writing command for <input type="button">
By using <a> anchor tag with styling

In this tutorial, we will learn about button style HTML using CSS, its various properties, how to work with them, and so on.

Overview

In this tutorial, we will understand the usage and functions of button CSS and why it is important in HTML. To construct a button in HTML, we generally use the tag button. However, the application and function of the button can be easily customized by using the CSS properties.

We can build event processing and user interaction with the help of button HTML & CSS. These are the most frequently used components in a website. A button is generally employed for even processing to generate greater user engagement. A button performs its activities only with a click of an event. By utilizing several button CSS styles we may successfully embellish buttons.

What is Button CSS?

The CSS buttons are used in HTML to create and design a web page that looks appealing to the users. The buttons are designed by applying various styling CSS properties. The main purpose of the button is to interact with the user and carry out event processing.

Buttons are used to perform all sorts of interactive functions such as submitting an online form or viewing a complete set of information, buttons do it all. With one click of the button, the user can perform everything as he likes. So to create a button and HTML, we use the button tag.

Examples of Basic Styling in Buttons

background-color

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Background Color</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db; 
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

border

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Border</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: 2px solid #e74c3c; 
    cursor: pointer;
    font-size: 16px;
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

border-radius

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Border Radius</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 30px; 
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

box-shadow

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Box Shadow</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

padding

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Padding</title>
<style>
  .button {
    display: inline-block;
    padding: 15px 30px; 
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

color

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Text Color</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white; 
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

font-size

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Font Size</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 18px; 
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

width

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Width</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 150px; 
  }
</style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

Hover Effects

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Hover Effect</title>
<style>
  .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease; 
  }

  .button:hover {
    background-color: #2980b9; 
  }
</style>
</head>
<body>
  <button class="button">Hover me</button>
</body>
</html>

Supported Browsers:

Google Chrome
Firefox
Microsoft Edge
Internet Explorer
Opera
Safari

When writing CSS code, it's important to consider the browsers you want your styles to work well in. However, the CSS properties I've mentioned in the previous responses are widely supported by modern browsers, so you don't need to worry too much about compatibility.

Here's a general overview of the compatibility of the CSS properties mentioned in the previous examples:

background-color: Widely supported by all modern browsers.

color: Widely supported by all modern browsers.

padding: Widely supported by all modern browsers.

border-radius: Widely supported by all modern browsers.

border: Widely supported by all modern browsers.

cursor: Widely supported by all modern browsers.

font-size: Widely supported by all modern browsers.

width: Widely supported by all modern browsers.

transition: Supported by all modern browsers.

Modern browsers, such as the latest versions of Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge, will display these styles consistently.

How does Button CSS work?

CSS (Cascading Style Sheets) is used to control the presentation and appearance of HTML elements on a web page. When you apply CSS styles to a button element, you're defining how that button should look and behave visually. Here's how the CSS for a button works:

Selector: You start by selecting the HTML element you want to style. In this case, it's the button element. The selector is usually the element's name preceded by a dot for classes or a hash for IDs.

.button {
  /* CSS rules go here */
}

Properties and Values: Within the curly braces of the selector, you define the CSS properties and their corresponding values. Each property describes a specific aspect of the element's appearance or behavior.

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  /* ... */
}

In this example:

background-color sets the background color of the button.
color sets the text color.
padding controls the spacing inside the button.
border-radius creates rounded corners.
font-size sets the size of the font.

Values and Units: CSS properties require values. Values can be keywords, numbers, colors, URLs, etc. You can also specify units like px (pixels), em, rem, %, etc., to define sizes.
Declaration Block: Each set of properties and values is known as a declaration block. The properties and values are separated by a colon, and each declaration is terminated with a semicolon.
Rules and Selectors: You can have multiple rules in a stylesheet, each with its own selector and declaration block. This allows you to apply styles to multiple elements.
Pseudo-classes and Pseudo-elements: CSS provides pseudo-classes (like :hover, :active, :focus) and pseudo-elements (like ::before, ::after) that let you style elements under specific conditions or create virtual elements for styling.
Cascade: If conflicting styles are applied to an element, the cascade determines which style takes precedence. Specificity (how specific a selector is) and source order are considered.
Inheritance: Some styles are inherited from parent elements, meaning child elements will inherit those styles unless overridden.

CSS allows you to control almost every visual aspect of HTML elements, from colors, fonts, and spacing to animations and transitions. The button example provided earlier demonstrates how you can style a button using CSS to achieve a visually appealing and interactive design.

Conclusion

A button is a crucial HTML element without which user interaction is not possible. various types of buttons can be created using CSS styles and their properties. you can easily change the size, shape, or style of the button by using the various button CSS elements. You can also add properties like animation and images to a web page with the use of CSS buttons.

Additionally, we have found that all current browsers offer strong support for these attributes. Remember to explore and combine various CSS attributes as you advance in your web development career for distinctive design effects.

Finally, the broad selection of professional courses offered by upGrad can help you hone your knowledge in web development and other cutting-edge technology. Investigate these options to remain up to date on market developments.

FAQs

How do I add a border to a button in CSS?

Button border CSS is an important element of the CSS properties. You can start by modifying the style parameter of the CSS properties in HTML. Then you can add the border to the button by writing the 'button border' tag in HTML with its associated properties and specifications such as border size, border color, etc.

How do I resize a button size?

Button size CSS specifies the size of the button on the web page. To resize a button we can access the button's properties in the class list and modify it with 'add'. Here you can add the length and width of the button specifically.

How to use the active button in CSS?

Active button is one that works when the user clicks on a particular button. It can be created in HTML with pure CSS active buttons. The button can be created using <a> and <button> tags.

How to call button ID in CSS?

To call a button ID in CSS, you simply write a hashtag (#) followed by the ID of the element. Then add the style attributes you want to apply to the elements by enclosing them in brackets. This will reflect the specific button ID you want to call.