# button
## break down of html
Let's break down the html
```html
```
You first add the button element, which consists of an opening and closing tag
```html
```
- 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