Javascript Css Button

If we want to style our button, in other words, to customize the look of the page, we have to use css. In this article, we will discuss how to do the following on a button: ..

• Change background color
• Change text color
• Change the size of the text.
• Add padding.
• round the corners.
• Add a colored border .
• Use it: .... hover feature
• Add shadow
• Change width
• turn off
• Animate it.

We will also discuss how to create groups of horizontal and vertical buttons.

Back - plane color

During the design of a button, the first thing you might want to do is set a background color - plan for button. By default, a button has a white background and black text. By using the CSS background color, we can change the background color of a button.

Suppose you are designing a button for a website and you want the button to have a pink background. We can change the color of our button using the following CSS code:

Our code returns:

Using the background color property , we changed the background color of our button to pink. We can change the background color of our button to a color using this property.

Text Color

To change the text color of a button you can use the color property. a button and want the button to have a pink background and the text in green. We could create this button using the following code:

Our code Returns:

Our button is the same size as before, but now the size of the characters inside is 20px. We used the font size attribute to set the size of the text in our button.

Padding

When designing a button, you may decide that you want a certain amount of space between the text inside a button and the exterior walls of the button. This is where the cushioning property comes into play .

The padding property uses length indicators (px, em, and so on ) or percentage values ‚Äã‚Äãto define a certain amount of space between text buttons and its borders.

Suppose we want to create two buttons on our page. One button should have 40px padding and the other should have 20px padding. We can create these buttons using the following code:

Our code returns: