116 lines
3.4 KiB
Markdown
116 lines
3.4 KiB
Markdown
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
|
||
|
||
|