ADVERTISEMENT
ADVERTISEMENT

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

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>

Result:

create css for all input buttons

CSS Tutorial & Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions


ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.