how can I modify image to be in the middle of the border of a button?

June 7, 2023

I’m quite new to css and I am having a bit of issue setting the image on a button I made to appear in the middle of the button like this:

gallery button

here is the current state of my code for the button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protera Survey & Price List</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
        <div class="logo">
            <img src="image/protection2.gif" alt="Protection">
        </div>
            <button class="button"  onclick="location.href='video.php'">
                <img id="gallery-icon" src="image/2023-06-02 12.26.22 - lamborghini.png"><br>
                Gallery
            </button>
            <button class="button" onclick="location.href='Price_List.php'">
                <img id="gallery-icon" src="image/lamborghini-5120x2880-11123.jpeg"><br>
                Price List
            </button>
            <button class="button" onclick="location.href='Survey.php'">
                <img id="gallery-icon" src="image/orange car.png"><br>
                Questionnare
            </button>
</body>
</html>

for the css of the button right now

.button {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
display: inline-block;
padding: 10px `20px;
background-color: rgba(255, 255, 255, .65);
color: black;
display: block;
align-items: center;
width: 100%;
max-width: 300px;
height:15%;
margin: 0 auto 10px;
padding-bottom: 5vh;
padding-top: 4vh;
margin-bottom: 275px;
border-radius: 8px;
border-color: orange;
border-width: 3px;
}

.button img {
  width: 75px;
  border-radius: 50px;
  border-color: orange;
  object-position: top 50px;
}

.button:hover {
background-color: orange;
color: white;
}

.button:hover {
  background-color: orange;
  color: white;
}

the result from my html and css was this

enter image description here

I tried to put paddings and margin in .button img, I also tried to give id to the image function on the html, I expected the result to be the first image I sent but it ended up looking like the one that I last Sent

>Solution :

Change the image source to get your car image

.button {
font-family: 'Bebas Neue', sans-serif;
font-size: 40px;
display: inline-block;
padding: 10px `20px;
background-color: rgba(255, 255, 255, .65);
color: black;
display: block;
align-items: center;
width: 100%;
max-width: 300px;
height:15%;
margin: 0 auto 10px;
padding-bottom: 5vh;
padding-top: 4vh;
margin-bottom: 275px;
border-radius: 8px;
border-color: orange;
border-width: 3px;
position:relative;
margin-top:100px;
}

.button img {
  width: 75px;
  position:absolute;
  left:50%;
  top:0px;
  transform:translate(-50%,-50%);
}

.button:hover {
background-color: orange;
color: white;
}

.button:hover {
  background-color: orange;
  color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protera Survey & Price List</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
            <button class="button"  onclick="location.href='video.php'">
                <img id="gallery-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png"><br>
                Gallery
            </button>
</body>
</html>