Skip to content
Related Articles

Related Articles

How to use buttons with icons using Pure CSS?
  • Last Updated : 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=
      integrity=
"sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"/>
  
    <!--Import Pure Css files-->
    <link
      rel="stylesheet"
      href=
      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=
      integrity=
"sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"/>
  
    <!--Import Pure Css files-->
    <link
      rel="stylesheet"
      href=
      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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :