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>

Result:

create css for all input buttons

CSS Examples »


Advertisement
Advertisement


Comments and Discussions!

Load comments ↻


Advertisement
Advertisement
Advertisement



Copyright © 2024 www.includehelp.com. All rights reserved.