Javatpoint Logo
Javatpoint Logo

CSS Buttons

In HTML, we use the button tag to create a button, but by using CSS properties, we can style the buttons. Buttons help us to create user interaction and event processing. They are one of the widely used elements of web pages.

During the form submission, to view or to get some information, we generally use buttons.

Let's see the basic styling in buttons.

Basic styling in Buttons

There are multiple properties available that are used to style the button element. Let's discuss them one by one.

background-color

As we have discussed earlier, this property is used for setting the background color of the button element.

Syntax

Example

Test it Now

border

It is used to set the border of the button. It is the shorthand property for border-width, border-color, and border-style.

Syntax

Example

Test it Now

border-radius

It is used to make the rounded corners of the button. It sets the border radius of the button.

Syntax

Example

Test it Now

box-shadow

As its name implies, it is used to create the shadow of the button box. It is used to add the shadow to the button. We can also create a shadow during the hover on the button.

Syntax

Example

Test it Now

padding

It is used to set the button padding.

Syntax

Let's understand it using an illustration.

Example

Test it Now

Next TopicCSS Float




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA