Propose the usual way of styling buttons (#23657)
I thought it'd be useful if we show the reader how we can create both normal and link buttons without much hassle.
This commit is contained in:
@ -145,6 +145,25 @@ To animate a button on click use 'button:active':
|
||||
}
|
||||
```
|
||||
|
||||
### Button Links
|
||||
|
||||
In many cases buttons will have to link to an url. As we can't add an href attribute to the HTML button element without some JavaScript workarounds we need to style our link like a button. This way we have a working <a> element disguised as a button, yet we can still use this class to style buttons. For example:
|
||||
|
||||
```
|
||||
.btn {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
min-height: 40px;
|
||||
padding: 20px 10px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
// Prevent visited links from turning purple
|
||||
.btn:visited {
|
||||
color: black;
|
||||
}
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
* https://www.w3schools.com/css/css3_buttons.asp
|
||||
* https://www.w3schools.com/howto/howto_css_animate_buttons.asp
|
||||
|
Reference in New Issue
Block a user