jQuery param() method

CSS Buttons

Last Updated : 02 Aug, 2024

CSS buttons enhance webpage aesthetics by applying various styling properties. They facilitate event processing and user interaction, from form submission to accessing information. HTML`<button>` tag is used to create buttons.

Table of Content

Background-colour property
Border property
Color property
Padding property
Font-size property
Border-radius property
Box-shadow property
Width property
Hover Effects property
Animated , Disabled, Fade in effects
Supported Browsers

Example: To demonstrate the implementation of the many buttons functionality with its multiple attributes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> HTML &lt;button&gt; tag</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>&lt;button&gt; tag</h2>
    <button>Button</button>
</body>

</html>

Output:

Screenshot-2024-01-12-181310 There are many CSS properties used to style the button element which are as follows:

Background-colour property

This property is used to set the background color of the button.

Syntax:

element {
     background-color: color_name;
}

Example: To demonstrate applying the back-ground colour to the button using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML &lt;button&gt; tag </title>
    <style>
        body
        {
            text-align: center;
        }

        h1 {
            color: green;
            text-align: center;
        }

        .b1 {
            background-color: red;
        }

        .b2 {
            background-color: blue;
        }

        .b3 {
            background-color: green;
        }

        .b4 {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>&lt;button&gt; tag</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-12-181658

Border property

This property is used to set the border of the button.

Syntax:

element {
      border: style;
}

Example: To demonstrate applying the border property to the Button using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML &lt;button&gt; tag</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            text-align: center;
        }

        .b1 {
            border: none;
        }

        .b2 {
            border: 2px black solid;
        }

        .b3 {
            border: 2px black dashed;
        }

        .b4 {
            border: 2px black double;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>&lt;button&gt; tag</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-12-182214

Color property

This property is used to set color of the text in the button. The color value can be set in terms of color name, color hex code, etc.

Syntax:

element {
     color: style;
}

Example: To demonstrate applying the color property to the Button using CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML &lt;button&gt; tag </title>
    <style>
        h1 {
            color: green;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .b1 {
            color: white;
        }

        .b2 {
            color: black;
        }

        .b3 {
            color: blue;
        }

        .b4 {
            color: crimson;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Padding property

The padding property is used to set the padding in the button.

Syntax:

element {
     padding: style;
}

Example: To demonstrate applying the padding property to the Button in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag </title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .b1 {
            background-color: red;
            padding: 15px 32px;
        }

        .b2 {
            background-color: blue;
            padding: 24px 50px;
        }

        .b3 {
            background-color: green;
            padding: 32px 32px;
        }

        .b4 {
            background-color: yellow;
            padding: 16px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-15-123800

Font-size property

This property is used to set the font size of the text in the button. Change the pixel value to get the desired size.

Syntax:

element {
     font-size: style;
}

Example: To demonstrate implementing the font-size property to adjust the font of the Button in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag </title>
    <style>
        h1 {
            text-align: center;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .b1 {
            background-color: red;
            font-size: 10px;
        }

        .b2 {
            background-color: blue;
            font-size: 15px;
        }

        .b3 {
            background-color: green;
            font-size: 20px;
        }

        .b4 {
            background-color: yellow;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-15-123800

Border-radius property

This property is used to set the border-radius of the button. It sets the rounded corners of the border.

Syntax:

element {
     border-radius: property;
}

Example: To demonstrate applying the border-radius property to the Button in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag </title>
    <style>
        h1 {
            color: green;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .b1 {
            background-color: red;
            border-radius: 3px;
        }

        .b2 {
            background-color: blue;
            border-radius: 16px;
        }

        .b3 {
            background-color: green;
            border-radius: 30px;
        }

        .b4 {
            background-color: yellow;
            border-radius: 70px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag with border radius</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-15-124431

Box-shadow property

The box-shadow property is used to create the shadow of the button box.

Syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] 
            [optional spread radius] [color];

Example: To demonstrate applying the box-shadow property to the Button in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag </title>
    <style>
        h1 {
            color: green;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        .b1 {
            padding: 15px 32px;
            border: none;
            font-size: 16px;
            color: white;
        }

        .b2 {
            background-color: green;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag with box shadow</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-15-124718

Width property

Width property is used to set the width of the button.

Syntax:

element {
     width: property;
}

Example: To demonstrate implementing the width property to set the width of the Button in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> button tag </title>
    <style>
        h1 {
            color: green;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }

        /* adding width in buttons */

        .b1 {
            background-color: red;
            width: 70px;
        }

        .b2 {
            background-color: blue;
            width: 120px;
        }

        .b3 {
            background-color: green;
            width: 50%;
        }

        .b4 {
            background-color: yellow;
            width: 70%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag with width property</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
        <button class="button b3">Green</button>
        <button class="button b4">Yellow</button>
    </div>
</body>

</html>

Output:

resize-1705303267783869072Screenshot20240115125007

Hover Effects property

The hover property is used to change the button interface when the mouse moves over.

Syntax:

element:hover {
    // CSS property
}

Example: To demonstrate implementing the hovering effect on the button using hover property in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag </title>
    <style>
        h1 {
            color: green;
        }

        .button {
            border: none;
            color: white;
            border-radius: 8px;
            text-align: center;
            padding: 20px;
            cursor: pointer;
            font-size: 20px;
        }


        .b1 {
            background-color: green;
        }

        .b2 {
            background-color: orange;
        }

        .b1:hover {
            background-color: white;
            color: orange;
        }

        .b2:hover {
            background-color: white;
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag with hover</h2>
    <div class="btn">
        <button class="button b1">Red</button>
        <button class="button b2">Blue</button>
    </div>
</body>

</html>

Output:

Animated , Disabled, Fade in effects

Animated Button: Makes clicking a button more interesting by adding a gentle, animation.
Disabled Button: Indicates a button that is temporarily inactive, or its action is not currently available.
Fade-in Effect on Hover: The button changes colors smoothly when you hover over it, making it look polished and responsive.

Example: To demonstrate the implementation of above animated, disabled and fade-in effect on hover in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML button tag</title>
    <style>
        h1 {
            color: green;
        }

        button {
            margin-top: 15px;
            padding: 10px;
            display: block;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Disabled button styling */
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Animated button styling */
        button.animated {
            animation: pulse 1s infinite;
        }

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

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Fade-in effect on hover */
        button:hover {
            background-color: #2ecc71;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML &lt;button&gt; tag</h2>
    <!-- Button with additional styles -->
    <button>Button</button>
    <!-- Disabled button -->
    <button disabled>
        Disabled Button
    </button>
    <!-- Animated button -->
    <button class="animated">
        Animated Button
    </button>
</body>

</html>

Output:

Supported Browsers:

Google Chrome
Firefox
Microsoft Edge
Opera
Safari

jQuery param() method

X

XDoodler

Improve

Article Tags :

Similar Reads

W3.CSS provides different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. W3.CSS also provides classes that can be used for changing the colour and size of buttons. W3.CSS contains many classes to set th

Pure CSS Buttons

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. We can create different types of buttons with the help of Pure CSS. Pure CSS Buttons Classes: Default ButtonsDisabled buttonsPrimary buttonsActive buttonsCu

Primer CSS Buttons

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by

Pure CSS Buttons Icons

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. To make the buttons more user-friendly we can put icons on the buttons. Pure CSS does not ship with the icons, there are so many icon packages available tha

Pure CSS Buttons Sizes

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. Sometimes we required different size buttons, there it comes, with the help of the Pure CSS Button Size class. Pure CSS Button Sizes class: There is no pred

Pure CSS Active Buttons

Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Active Buttons are used to create an active button that works when the user clicks on the button. The button can be created using <a> and <button>

Materialize CSS Buttons

The button component along with the links inside them are probably one of the most significant features allowing the users to interact with the web pages and perform various functions and move from one web page to other. Following are the various classes of buttons defined along with their effect: R

The button is an important feature of any website or in any app. There are a few particular things that we all should care about buttons like color, size and etc. In spectre we have some specific classes for individual things on buttons. All the classes are mentioned and described below: Spectre But

Pure CSS Primary Buttons

Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class. Pure CSS Primary Buttons Class: pure-button-prim

Bulma Buttons List

Bulma Button List is used to group buttons in a list. Button List can be created by wrapping the buttons in an HTML div with class buttons. If the list is longer than the current viewport width, the buttons will be wrapped on multiple lines while keeping the spacing between the buttons constant. But