How to create a button with image and text in html?
January 25, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create a button with image and text in html, put the image tag in button like this <button><img src="image/button-icon-blue.jpg"></button>. it will create a button with image and text in html.
Today, I am going to show you how to create a button with image and text in html with code example.
Table of contents
- Includes bootstrap view
- Define its class name
This article will guide you to create a button with image and text in html with example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Define its css class
After that, create a button with image and text, use button class display of flex, aligh-items of center, background-color of #f7ed83.
button{
display: flex;
align-items: center;
background-color: #f7ed83;
border-radius: 10%;
}Example.
Let’s look at the following example to understand how it basically works:
In this example, first we will create button tag and then add image with text.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button{
display: flex;
align-items: center;
background-color: #f7ed83;
border-radius: 10%;
}
</style>
</head>
<body>
<h2>Button with image and text in HTML</h2>
<button>
<img src="image/button-icon-blue.jpg" alt="Image" width="30px" height="30px" >
Button Text
</button>
</body>
</html>Check the output of the above code example.
All the best 👍