Working with Buttons and Icons

About hyperlinks styled as buttons

Links can be styled to look like 'click/tap me' buttons. Such links are styled differently to links within paragraphs of text.

• They do not have underlines.
• They have padding all around them to create the button appearance.
• They have bottom margins to push down whatever content follows them, and often top, left and right margins too.
• They have borders and, typically, background colours too.
• Their corners can be square, rounded or semi-circular.
• Their CSS class names typically begin with btn. For example, btn-solid, btn-rounded or btn-ghost.

Adding a hyperlink button to your sample web page

In this section you will add a button-styled hyperlink to the page-11.html sample web page in your websites folder.

1. In VS Code, open the page-11.html web page and style-11.css stylesheet.
2. In the page-11.html file, after the introduction, and at the end of the second paragraph in the first section, add the following new paragraph which contains a hyperlink.

     <p><a href="#">Start free 14-day trial</a></p>
   

   Your web page should now look as shown below.
3. Next, add a class with the name of btn-solid to the hyperlink.

     <p><a href="#" class="btn-solid">Start free 14-day trial</a></p>
   

4. Now, switch to the style-11.css stylesheet.
5. At the bottom of the stylesheet, copy-and-paste the following three sets of selectors with style rules for the btn-solid class:

   /* ===== BUTTON STYLES ===== */
   
   /* All button states */
   a.btn-solid {
   
   
   }
   
   /* Passive button states */
   a.btn-solid:link, a.btn-solid:visited {
   
   
   }
   
   /* Interactive button states */
   a.btn-solid:focus, a.btn-solid:hover, a.btn-solid:active {
   
   }
   

   Why three sets of style rules?
   • The first set of style rules will always apply to the button – regardless of its state.
   • The second will apply only to the button’s passive state, and
   • The third will apply only to the button’s interactive state.
6. To the first set of style rules, copy-and-paste the following five pairs of CSS properties and values:

   color: white;
   text-decoration: none;
   padding: 12px 32px;
   font-weight: bold;
   text-transform: uppercase;
   

7. To the second set of style rules for the button’s passive states, copy-and-paste the following two pairs of CSS properties and values:

   background-image: linear-gradient(90deg,#e052a0,#f15c41);
   transition: all 0.2s linear;
   

8. To the third set of style rules for the button’s interactive states, copy-and-paste the following CSS property and value pair:

   background-image: linear-gradient(90deg,#45C4E1,#4595E6);
   

   Your complete set of CSS styles for the .btn-solid class should now look as follows.
9. Save the page-11.html web page and style-11.css stylesheet.

In your web browser, the passive and interactive button states should now look similar to those below.

You have now added your first hyperlink-styled button to your sample web page.

Click page-11.html to view a finished sample of this web page in a new tab of your web browser.

Adding and styling a second hyperlink button

Now you will add and style a second button to your sample web page.

1. In the page-11.html file, directly under the button you previously added, copy-and-paste a second hyperlink button as follows.

     <p><a href="#">Download Whitepaper</a></p>
   

   Your HTML should now look as shown below.
2. Next, add a class with the name of btn-ghost to the hyperlink.

     <p><a href="#" class="btn-ghost">Download Whitepaper</a></p>
   

3. Now, switch to the style-11.css stylesheet.
4. At the bottom of the stylesheet, copy-and-paste the following three sets of style rules for the btn-solid class:

   /* ===== BUTTON STYLES ===== */
   
   /* All button states */
   a.btn-ghost {
   
   }
   
   /* Passive button states */
   a.btn-ghost:link, a.btn-solid:visited {
   
   }
   
   /* Interactive button states */
   a.btn-ghost:focus, a.btn-ghost:hover, a.btn-ghost:active {
   
   }
   

5. To the first set of all-states style rules, copy-and-paste the following four pairs of CSS properties and values:

   text-decoration: none;
   padding: 12px 32px;
   font-weight: bold;
   text-transform: uppercase;
   

6. To the second set of style rules for the button’s passive states, copy-and-paste the following three pairs of CSS properties and values:

   color: #fff;
   border: solid 3px #fff;
   transition: all 0.2s linear;
   

7. To the third set of style rules for the button’s interactive states, copy-and-paste the following two CSS property and value pairs:  

   color: lightblue;
   border: solid 3px lightblue;
   

   Your complete set of CSS styles for the .btn-ghost class should now look as follows.
8. Save your page-11.html web page and style-11.css stylesheet.

In your web browser, the passive and interactive button states for your second button should now look similar to those below.

You have now added a second hyperlink-styled button to your sample web page.

Click page-11.html to view a finished sample of this web page in a new tab of your web browser.

Styling button shapes

In the following steps you will create two new classes in CSS to control the shape of hyperlinks styled as buttons.

1. In your page-11.html file, add the following two new classes to your first and second buttons.

     <p><a href="#" class="btn-solid btn-soft">Start free 14-day trial</a></p>  
     <p><a href="#" class="btn-ghost btn-rounded">Download Whitepaper</a></p>  
   

2. Now, switch to the style-11.css stylesheet.
3. At the bottom of the stylesheet, copy-and-paste the following two new class selectors and their style rules.

     a.btn-soft { border-radius: 5px }
     a.btn-rounded { border-radius: 25px }
   

4. Save your page-11.html web page and style-11.css stylesheet.

In your web browser, the new button styles should look similar to those shown below.

Hyperlink buttons and inherited styles

In this section you will apply font-related CSS styles directly to your hyperlink buttons.

1. In your page-11.html file, remove the opening and closing paragraph tags from the two button-styled hyperlinks you added previously.

     <a href="#" class="btn-solid btn-soft">Start free 14-day trial</a>
     <a href="#" class="btn-ghost btn-rounded">Download Whitepaper</a>
   

2. Save and view your page-11.html web page.

You can see that the text inside the two buttons has now ‘lost’ some of their properties. Specifically:

• font-family:: The text is now displaying in the web browser default font of serif.
• font-size:: The text is now displaying in the web browser default size of 16px.

Here is what has happened:

• When a hyperlink button is inside a pair of opening <p> and closing </p> paragraph tags, it inherits or ‘picks up’ the font-family and font-size styles of the paragraph that encloses it.
• When the enclosing paragraph tags are removed, the two hyperlink buttons have no font-family and font-size styles to inherit. So their text reverts back to the web browser’s default values.

The solution is to apply font-family and font-size styles directly to the hyperlink buttons.

1. In the style-11.css stylesheet, add the following two property and value pairs to the first, all states set of style rules for each of your two button selectors, .btn-solid and .btn-ghost.

   font-family: 'PT Sans', sans-serif; 
   font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));
   

   The complete ‘all states’ style rules for the two hyperlink button selectors should now look similar to the following. Note that the fluid font size of the text inside the buttons is slightly smaller than the fluid font size of the text paragraphs in the rest of the web page.
2. Save your style-11.css stylesheet and view your web page.

Your two hyperlink buttons now have their own CSS properties of font-family and font-size set just for them.

They no longer depend on inheriting these properties from enclosing paragraph <p> ... </p> tags.

Positioning buttons with inline-block

You will want to add some margin spacing around your hyperlink buttons. These margins will:

• Add spacing between the hyperlink buttons and any other elements on the web page, such as text or images.
• When two or more buttons are placed together, the margins will add some spacing between adjoining buttons.

Here are the steps:

1. In the style-11.css stylesheet, add the following margin styles to the first, all states set of style rules for each of your two button selectors, .btn-solid and .btn-ghost.

   margin: 20px 40px 20px 0;
   

   This should add a top and bottom margin of 20px to each button, and a right margin of 40px.
2. Save your style-11.css stylesheet and view your web page.

As you can see, there is now a margin-right of 40px applied to two buttons. This is what you want.

But your web browser ignores your margin-top and margin-bottom values of 20px.

Here are the steps to correct this:

1. In the style-11.css stylesheet, add the following property and value pair to the first, all states set of style rules for each of your two button selectors, .btn-solid and .btn-ghost.

   display: inline-block;
   

   The complete ‘all states’ style rules for the two hyperlink button selectors should now look similar to the following.
2. Save your style-11.css stylesheet and view your web page.

Success! Your hyperlink buttons are now complete.

Click page-11.html to view a finished sample of this web page in a new tab of your web browser.

Adding icons with Font Awesome

In the final part of this Tutorial, you will add some icons from Font Awesome to your button-styled hyperlinks.

1. In VS Code, display your page-11.html file.
2. In the head section of the web page, just before the closing </head> tag, copy-and-paste the following comment line and code.

   <!-- Link to icons for Font Awesome 5 -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">  
   

   This adds the Font Awesome stylesheet to your web page.
3. Use your web browser to go to this web address:   https://fontawesome.com/
4. Click the option named Icons in the menu bar across the top of the screen. On the next page displayed you can use the Search box to locate icons by name from the Font Awesome range of 1535-plus free icons.
5. For example in the Search box, enter the word:   user   and click the result displayed below.
6. On the next screen displayed, you can see the HTML code to generate the 'user' icon. Just click once on the code to copy it. The HTML icon code will look as follows.
7. You can now copy-and-paste this or other selected icons to your web pages.
8. In your page-11.html web page, locate the first of the two hyperlink buttons.
9. Click after the ‘Start free 14-day trial’ text, press the Spacebar key once and then paste the HTML code you copied from Font Awesome.
10. Save and view your page-11.html. The first of your two button-styled hyperlinks should look similar to the following.
11. Next, return to Font Awesome, and search for the following icon:   arrow down
12. From the list of search results displayed, scroll down to the icon named arrow-circle-down. Click the icon.
13. On the next screen displayed, click the HTML code to copy it.
14. In your page-11.html web page, locate the second of the two hyperlink buttons.
15. Click after the ‘Download Whitepaper’ text, press the Spacebar key once and then paste the HTML code you copied from Font Awesome.
16. Save and view your page-11.html. The first of your two button-styled hyperlinks should look similar to the following.

You have now successfully added Font Awesome icons to two of your button-styled hyperlinks.

Adding spacing to icons in your buttons

Within your hyperlink buttons, the single space between the text and the icons, created by pressing the Spacebar key once, is not enough. More spacing is needed.

You could type several spaces simply by pressing the Spacebar multiple times. But the web browser will combine multiple empty spaces into a single space. So that is not a solution.

One option is to type the special HTML code that forces an empty space. This is the non-breaking space character. You type this as follows:

&nbsp;

For example, in your page-11.html file, you could type three non-breaking space codes inside your buttons as shown below.

Inside each button, between the text and icon, you have four spaces. One space is the result of pressing the Spacebar; the other three are created by the three &nbsp; codes.

Your buttons will now display as follows in your web browser.

The result will look as follows.

Unfortunately, adding lots of &nbsp; codes to text can cause problems when your web page is displayed on mobile-sized screens.

The better solution is to use CSS to add a margin-left spacing value to your icons. Here are the steps.

1. In your page-11.html web page, remove any &nbsp; codes you may have added inside your hyperlink buttons.   You can leave the single, blank space you typed by pressing the Spacebar key.
2. Switch to your style-11.css stylesheet, and copy-and-paste the following after all your other button styles.

   a.btn-solid i, a.btn-ghost i {
       margin-left: 12px;
   }

3. Save your web page and stylesheet.

That’s it. You have now successfully added spacing to icons within your button-styled hyperlinks.

Click page-11.html to view a finished sample of this web page in a new tab of your web browser.