Basic Button Styling: A Button in HTML for a Beginner

CSS or cascading style sheets is a language used in trying to describe a document’s presentation done or written in a markup language. It also describes the ways that the HTML elements should be on screen and other media. If you want to know more about this, keep reading and order our programming homework help.

button styling

Share this:
It saves people from a lot of work because it can control the layout of web pages at once. The external style sheets are kept in the CSS Files.

CSS Button

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

}

Button Colors

Use the background-color property to change the background color of a button:

.button1 {background-color: #4CAF50;} /* Green */

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black *

Button Sizes

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

The Benefits of Using CSS

It helps in defining your styles for your website pages, which include but are not limited to the layout, variations and designs that are displaying on the screen of different devices, regardless of size. It also aids in solving a big problem. For example, HTML wasn’t intended for containing tags when you need to format your website pages, but it was made for describing a web page’s content, such as “<p>This is a paragraph.</p>”

And when tags like <font> as well as color characteristics would be added to HTML 3.2 specifications, this would start a problem for many website developers. And when it comes to the development of big websites where the color and the font information were added to each page, it will be a very long, tedious process. So in order to solve this problem, CSS was created.

We can help you save more time! get your button in html help