Making 3 PNG images buttons-CodePudding

I'm trying to make a GUI for my final year project, so to make it more ergonomic I've suggested a simple design as shown in the picture, so as I'm still a beginner in HTML/CSS I tried multiple ways to find how to turn an image to a button, and that button will start another function which starts capturing video with a webcam, so for me, the most important is how to make the buttons as shown in the picture.

here is my HTML code:


<section >
    <nav>
        <a href="index.html"><img src="images/logo.png"></a>
    </nav>
</section>

and here is the CSS linked with:

*{
    margin: 0;
    padding: 0;
}
.lg{
    min-height: 100vh;
    width: 100%;
    background-image: url(images/Background2.png);
    background-position: center;
    background-size: cover;
    position:relative;

}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: center;
}

CodePudding user response：

This way, you're making whole image clickable, another approach is to have img and to create clickable areas, here's an example (of course you will have to update the coordinates inside of the coords attribute):

<img src="images/logo.png" alt="usemap" usemap="#lessons"/>
      <map name = "lessons">
         <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
            href="placeyouwannago" alt="Start capture" target="_blank">
         <area shape="rect" coords="22,83,126,125" alt="Input"
            href="placeyouwannago" target="_blank">
         <area shape="circle" coords = "73,168,32" alt="Settings"
            href="placeyouwannago" target="_blank">
      </map>

Check documentation here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

CodePudding user response：

just place the image inside a button or place the image in an <a>

function test(){
location.href="https://stackoverflow.com"
console.log("button")
}

<button onclick="test()"><img src="https://via.placeholder.com/25"></button>

<a href="https://stackoverflow.com"><img src="https://via.placeholder.com/25"></a>