EN
CSS - button with image
0
points
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 thebuttonelement,background-size- to set the size of an image (not the size of the button),background-repeat(optionally) - set tononewill 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>