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>
<link
rel="stylesheet"
href=
integrity=
"sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"/>
<link
rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"/>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>Buttons using Pure CSS</p>
<br/>
<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>
<link
rel="stylesheet"
href=
integrity=
"sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"/>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...