ob-vaults/Phoenix/Web dev/html-css/button.md

status: #doc Tags: #html #html-element links: html-elements html-css Date: 2023-07-28

---

button

for making a button we just add below

<button></button>

important css property s

background-color :

change background color of an element, background is the total size of the element, including padding and border (but not the margin).

/* examples */
button {background-color: #92a8d1;}
button {background-color: rgb(201, 76, 76);}
button {background-color: hsl(89, 43%, 51%);}

color :

change color of text

button {color: red;}

border

The border property is a shorthand property for:

• border-width
• border-style (required)
• border-color If border-color is omitted, the color applied will be the color of the text.

syntax:

border: border-width border-style border-color |initial|inherit;

height and width

• height The height property sets the height of an element. The height of an element does not include padding, borders, or margins! If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. Note: The min-height and max-height properties override the height property. length is set base on css-units

syntax:

height: auto|length|initial|inherit;

• width The width property sets the width of an element. The width of an element does not include padding, borders, or margins! If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. Note: The min-width and max-width properties override the width property. length is set base on css-units

syntax:

width: auto|length|initial|inherit;

border-radius

The border-radius property defines the radius of the element's corners.

Tip: This property allows you to add rounded corners to elements! 

This property can have from one to four values. Here are the rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner): !Screenshot_20230802_110743.png Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner): !Screenshot_20230802_111128.png **Two values - border-radius: 15px 50px;** (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners): !Screenshot_20230802_111143.png **One value - border-radius: 15px;** (the value applies to all four corners, which are rounded equally: !Screenshot_20230802_111154.png

cursor

set mouse cursor , for buttons we set it to pointer

button {cursor: pointer;}

---

References

w3