Languages
[Edit]
EN

CSS - button with image

0 points
Created by:
Savannah
319

In this article, we would like to show you how to create a button with an image using CSS.

Quick solution:

button {
  /* background properties */
  background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
  background-size: 50px;
  background-repeat: no-repeat;
  
  /* actual button properties */
  height: 50px;
  width: 50px;
  
  /* disable button border */
  border: none;
}

 

Practical example

In this example, to create a good looking button with an image, we use simple button element with the following attributes:

  • background-image - to set an image on the button element,
  • background-size - to set the size of an image (not the size of the button),
  • background-repeat (optionally) - set to none will disable image repeating if it is too small.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    button {
      /* background properties */
      background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
      background-size: 50px;
      background-repeat: no-repeat;
      
      /* actual button properties */
      height: 50px;
      width: 50px;
      margin: 0 0 0 25px;
      
      /* disable button border */
      border: none;
    }

  </style>
  <script>
    function handleClick(){
      console.log('Button clicked...');
    }
  </script>
</head>
<body>
  <p>Click the button:</p>
  <button onclick="handleClick()"/>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join