status: #doc 
Tags: #html #html-element
links: [[html-elements]] [[html-css]]
Date: 2023-07-28
___
# button

for making a button we just add below

```html
<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).

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

change color of text
```css
button {color: red;}
```

### border

The border property is a shorthand property for:
  - [border-width](https://www.w3schools.com/cssref/pr_border-width.php)
  - [border-style (required)](https://www.w3schools.com/cssref/pr_border-style.php)
  - [border-color](https://www.w3schools.com/cssref/pr_border-color.php)
If border-color is omitted, the color applied will be the color of the text.

syntax:
```text
border: border-width border-style border-color |initial|inherit;
```

## height and width

- [height](https://www.w3schools.com/cssref/pr_dim_height.php)
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](https://www.w3schools.com/cssref/pr_dim_min-height.php) and [max-height](https://www.w3schools.com/cssref/pr_dim_max-height.php) properties override the `height` property.
length is set base on [[css-units]]

syntax:
```text
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](https://www.w3schools.com/cssref/pr_dim_min-width.php) and [max-width](https://www.w3schools.com/cssref/pr_dim_max-width.php) properties override the `width` property.
length is set base on [[css-units]]

syntax:
```text
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|100]]
**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|100]]
**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|100]]
**One value - `border-radius: 15px;**` (the value applies to all four corners, which are rounded equally:
![[Screenshot_20230802_111154.png|100]]

## [cursor](https://www.w3schools.com/cssref/pr_class_cursor.php)

set mouse cursor , for buttons we set it to pointer

```css
button {cursor: pointer;}
```













---
# References
w3