greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
pull/23904/head^2
Jeffrey Camphens 2018-12-13 03:33:33 +01:00 committed by Tom
parent ada27f1790
commit 6671151e03
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
guide/english/css/css-buttons/index.md
View File

@ -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