CSS - Create and Apply CSS for All Buttons on the Page

By IncludeHelp Last updated : July 11, 2023

In this example we will learn how to create CSS for all Input Buttons, and without applying class for every element.

CSS - Create and Apply CSS for All Input Button on the Page

CSS


<style>
    body {
        background-color: #efefef;
        color: #000;
        padding: 20px;
        font: 100%;
        font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
    }
    /*CSS for All Input Buttons*/
    body input[type="button"] {
        font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
        background-color: #006969; /* Green */
        border: none;
        color: #fff;
        padding: 8px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
    }
    body input[type="button"]:hover {
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
    }
</style>

HTML Source Code with CSS


<!--CSS - Create and Apply CSS for All Buttons on the Page.-->
<html>
    <head>
        <title>CSS - Create and Apply CSS for All Buttons on the Page.</title>
        <style>
            body {
                background-color: #efefef;
                color: #000;
                padding: 20px;
                font: 100%;
                font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
            }
            /*CSS for All Input Buttons*/
            body input[type="button"] {
                font-family: "Segoe UI", "Open Sans", sans-serif, Arial;
                background-color: #006969; /* Green */
                border: none;
                color: #fff;
                padding: 8px 16px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                cursor: pointer;
            }
            body input[type="button"]:hover {
                box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
            }
        </style>
    </head>

    <body>
        <h1>CSS - Create and Apply CSS for All Buttons on the Page.</h1>
        <input type="button" value="Button 1" />
        <input type="button" value="Button 2" />
        <input type="button" value="Button 3" />
    </body>
</html>