How to create button with image using css?

Hi 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.

CSS, image, with, button

Try the below codesandbox link to customize the above example as per your requirements.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts