How to create button with image using css?
February 01, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create button with image using css, put the image tag in button like this <button class="image-button"><img src="image/logo-icon.jpg" alt="Image"></button>. it will create button with image using css.
Today, I am going to show you how to create button with image using css with code example.
Table of contents
- Includes css in html page
- Include the code in body
This article will guide you to create button with image using css with example.
Step 1: Includes css in html page
Create button with image using css, use button class display of inline-flex, aligh-items of center, background-color of #124354, border-radius of 5px, cursor of pointer.
.image-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #124354;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.image-button img {
height: 20px;
margin-right: 10px;
}Step 2: Include the code in body
in this code, we have defined a button element and used img src="images/logo-icon.jpg" with the text button text.
<button class="image-button">
<img src="image/logo-icon.jpg" alt="Image">
<span>Button Text</span>
</button>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.
<!DOCTYPE html>
<html>
<head>
<style>
.image-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #124354;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.image-button img {
height: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<button class="image-button">
<img src="image/logo-icon.jpg" alt="Image">
<span>Button Text</span>
</button>
</body>
</html>Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirements.
All the best 👍