From 6671151e03d3230a2bd40ad6467be03d5f1a4525 Mon Sep 17 00:00:00 2001 From: Jeffrey Camphens Date: Thu, 13 Dec 2018 03:33:33 +0100 Subject: [PATCH] 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. --- guide/english/css/css-buttons/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/guide/english/css/css-buttons/index.md b/guide/english/css/css-buttons/index.md index 929714738a..a1853e77dd 100644 --- a/guide/english/css/css-buttons/index.md +++ b/guide/english/css/css-buttons/index.md @@ -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 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