In this article, we will learn how to create CSS Button with icon. There are several ways of adding icons to HTML buttons with CSS. But in this article, we will be using the Font Awesome Icon library and appending icons to HTML buttons.
Prerequisites
- Basic knowledge of HTML and CSS.
- Access to a code editor (online or offline).
Steps to Create CSS Button with Icon
Step 1: Add Icon Library Inside the <head> element of the HTML document.
To add an icon library, we will use Font Awesome CDN. This is by far the easiest way to get Font Awesome on your website or web application with just a single line of code. No downloading, no installing! Just copy and paste the below code inside the <head> element:
<!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
You might be wondering why we have used CDN instead of downloading the required Font Awesome document on the local host (inside the resource directory).
Here’s an answer: A CDN (Content Delivery Network) is a network of servers that are geographically distributed around the world. When a user requests a resource from a website that is using a CDN, the request is routed to the server that is closest to the user. This can significantly improve the performance of the website, as the user does not have to wait as long for the resource to be delivered.
CDNs are preferred in web development for a number of reasons:
- Performance: CDNs can significantly improve the performance of a website by reducing the distance that the user has to travel to download the content. This is especially beneficial for websites that serve a lot of static content, such as images, CSS, and JavaScript.
- Scalability: CDNs are scalable, which means that they can easily handle increased traffic. This is important for websites that experience spikes in traffic, such as during sales events or product launches.
- Security: CDNs can help to improve the security of a website by caching static content and offloading the load from the origin server. This can help to protect the origin server from DDoS attacks.
Overall, CDNs are a valuable tool for web developers who want to improve the performance, scalability, and security of their websites.
Here are some additional benefits of using a CDN:
- Reduced bandwidth costs: A CDN can help to reduce bandwidth costs by caching static content closer to users. This can be especially beneficial for websites that serve a lot of images or videos.
- Improved SEO: Google and other search engines take website speed into account when ranking websites in search results. Using a CDN can help to improve your website’s speed, which can lead to improved rankings.
- Increased uptime: A CDN can help to improve your website’s uptime by providing a backup in case of an outage at your origin server.
If you are looking for a way to improve the performance, scalability, security, bandwidth costs, SEO, and uptime of your website, then a CDN is a great option.
Step 2: Add HTML
We will be creating 5 different buttons with 2 variants each. First variant with both text and icons while the second variant contains only icons.
To do that, we need to add a couple of lines of HTML with <button> tag and btn CSS class.
Inside the button tag, we have added the i tag for icons with Font awesome CSS class for buttons. As you can see in the example, we have used fa fa-home, fa fa-bars, fa fa-trash, fa fa-close and fa fa-folder for different buttons.
<p>Icon buttons with text:</p> <button class="btn"><i class="fa fa-home"></i> Home</button> <button class="btn"><i class="fa fa-bars"></i> Menu</button> <button class="btn"><i class="fa fa-trash"></i> Trash</button> <button class="btn"><i class="fa fa-close"></i> Close</button> <button class="btn"><i class="fa fa-folder"></i> Folder</button>
Similarly, we will add five more button tags with class btn and inside this, we have added i tags for the icons. Like our previous example, we have not added any text inside the button tag.
<!-- Add font awesome icons to buttons --> <p>Icon buttons:</p> <button class="btn"><i class="fa fa-home"></i></button> <button class="btn"><i class="fa fa-bars"></i></button> <button class="btn"><i class="fa fa-trash"></i></button> <button class="btn"><i class="fa fa-close"></i></button> <button class="btn"><i class="fa fa-folder"></i></button>
Step 3: Add CSS
Let’s write some CSS code for btn class:
/* Buttons styles */
.btn {
background-color: #000080; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 14px 18px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
To give this button a lively look and feel, you can add some hover effects to the button with a darker or lighter tinge. In our case, we have used a lighter tinge:
/* Darker background on mouse-over */
.btn:hover {
background-color: #1035ac;
}
See CSS Button with Icon in Action
See the Pen Create CSS Button with Icon by Rajesh Rai (@WebsiteVidya) on CodePen.
You may also like:
How to Create 3D Button in HTML & CSS?
Additional Tips
Here are some additional tips for creating CSS buttons with icons:
- You can use any icon that you like. There are many free icon libraries available online, such as Font Awesome and Bootstrap Icons.
- You can change the color, size, and shape of the button using CSS.
- You can add a hover effect to the button so that it changes color or style when the user hovers over it.
- You can add a click event handler to the button so that it performs an action when the user clicks on it.
Resources
Learn HTML, CSS and JavaScript:
- 50 Projects In 50 Days – HTML, CSS & JavaScript
- Build Responsive Real-World Websites with HTML and CSS
- 60 HTML CSS JS projects – HTML5, CSS3 and vanilla JavaScript
Conclusion
We hope you would like this tutorial on how to create CSS Button with icon. We encourage you to experiment with different icon libraries and CSS code to create your own custom buttons.
How to Install Lighttpd on Ubuntu 20.04 LTS – 5 Easy Steps