How to use buttons with icons using Pure CSS? - GeeksforGeeks

08 Mar, 2021
Incorporating icon fonts with Pure buttons is a simple task using Pure CSS. Since Pure CSS does not come with its own icon pack, we are using icon fonts from Font Awesome.
Before creating buttons with icons first we must include the pure.css file into our HTML file directly from CDN. Then link the Font Awesome CSS files to your page. 
Example 1: The following code demonstrates the pure buttons using various classes of Pure CSS. Refer the comments in the following code and output image for better understanding.
HTML
<!DOCTYPE html><html><head>    <!--Import Font Awesome icon pack-->    <link      rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="      crossorigin="anonymous"/>      <!--Import Pure Css files-->    <link      rel="stylesheet"      href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"      integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"      crossorigin="anonymous"/>  </head>  <body>     <h2 style="color:green">GeeksforGeeks</h2>       <p>Buttons using Pure CSS</p>       <br/>    <!--Use <i> element within class "pure-button"-->        <button class="pure-button" href="#">            <i class="fas fa-phone-alt"></i>            Phone        </button>              <button class="pure-button" href="#">            <i class="fas fa-envelope"></i>            Message        </button>          </body>  </html>
Output:
Example 2: The following example demonstrates other buttons using the classes of Pure CSS. The developer can develop his own custom buttons like a success button as shown below.
HTML
<!DOCTYPE html><html>  <head>    <!--Import Font Awesome icon pack-->    <link      rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="      crossorigin="anonymous"/>      <!--Import Pure Css files-->    <link      rel="stylesheet"      href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"      integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"      crossorigin="anonymous"/>      <style>      .button-success {        color: white;        border-radius: 3px;        background: green;      }    </style>  </head>    <body>    <h1 style="color: green">GeeksforGeeks</h1>    <strong>Buttons using Pure CSS</strong>      <br />    <button class="pure-button">      <i class="fas fa-fire-alt"> Fire Work</i>    </button>      <button class="pure-button">      <i class="fa fa-bolt"> Lightning</i>    </button>  </body></html>
Output:
Pure CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript