# button
## break down  of html
Let's break down the html
```html
<body>
    <button type="button" class="button">Click me!</button>
</body>
```

You first add the button element, which consists of an opening and closing tag
```html
 <button> and closing </button>
```
- The type="button" attribute in the opening button tag explicitly creates a clickable button. Since this particular button is not used for submitting a form, it is useful for semantic reasons to add it in order to make the code clearer and not trigger any unwanted actions.
- The class="button" attribute will be used to style the button in a separate CSS file. The value button could be any other name you choose. For example you could have used class="btn".
- The text Click me! is the visible text inside the button.
## styling button
```css
* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}
```
The default styling of buttons will vary depending on the browser
The code from above will result in the following:
![[button 1.png|500]]

### How to Change the Default Styling of Buttons

for each option add to class or id

####  for background color
```css
    background-color:#0a0a23;
```
####  for text color
```css
    color: #fff;
```
### Change the Border Style of Buttons

#### border color
```css
    border-color: #fff;
```
#### having border or not 
```css
    border: none;
```
![[button2.png|500]]
#### round-up the edges of the button
```css
    border-radius:10px;
```

![[button3.png|500]]
#### slight dark shadow effect around the button
```css
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);
```
![[button4.png|500]]


## Change the Size of Buttons

