77 lines
1.7 KiB
Markdown
77 lines
1.7 KiB
Markdown
# 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
|
|
|