Hi! In today's tutorial, I'm going to show you how you can add buttons above an image using some simple CSS.

If you've followed any of my tutorials before, you know that I'm big on presentation. To that end, I've included some cosmetic details along with the essential code needed to achieve our goal.

Where necessary, I've added comments to differentiate is optional, and what is absolutely required.

Our HTML:

For the html code, all we need is a(recommended)*figure element, an image, adiv to wrap our(optional)figcaption and(required)p elements, and a few buttons.

<figure><imgsrc="img/example.png"alt=""><!--Optional, if you're only adding a single button--><div><!--Optional--><figcaption>           example:</figcaption><!--Required for grouping buttons--><p><button>1</button><button>2</button><button>3</button></p></div></figure>

You'll note that I chose semantically significant elements for everything, except the div, which we don't really want to be accounted for semantically.

NOTE:

The<figure> element is recommended for its semantic value, but you can technically use any container element you like. Examples includesection,p,article, anddiv. However, I highly recommend sticking with elements that carry semantic value, for SEO and accessibility benefits.

ALSO NOTE:

You could opt to use a single button, and in such a case, you could drop thep element, but you will still need to position the button, as shown with thediv andp elements in the CSS code below.

Our CSS:

Now comes the fun part. Here's where you'll really have to pay some attention, because there's a lot to cover. Don't worry though, I'll break it down for you. I've included the explanations directly in the code as comments.

/*OPTIONAL, but recommended:
Prevents borders and padding from messing withexplicitly declared height or width.
Resets margin and padding on everything in thebrowser.*/
*{
box-sizing:border-box;
margin:0;
padding:0;
}
/* OPTIONAL: A matter of style and taste./
/ NOTE: I've grouped selectors together, wherever
properties are sharing values.
This reduces code duplication.
It makes it easier to adjust multiple styles at once.
Makes your code easier to maintain.*/
body,p,div,figure,figcaption,button{
display:flex;
font-family:sans-serif;
font-size:10px;
}
body,figcaption,div,p,button{
align-items:center;
}
body,button{
justify-content:center;
}
/* OPTIONAL: This allows us to place the <figure>
element in the center of the page */
body{
height:100vh;
}
figure{
/* Required:/
position:relative;
/ Optional: */
width:50%;
}
img{
/aspect-ratio: is not supported in older browsers/
aspect-ratio:1/.5;
width:100%;
}
/*The div is optional, and only included to help with
placement.
   *NOTE HOWEVER: theposition: absolute; property +
    value paair are required, along with at least one
    of:bottom,left:,right:, andtop:.
*/
div{
justify-content:flex-start;
flex-flow:rownowrap;
height:30px;
position:absolute;
bottom:10px;
left:15px;
right:15px;
width:auto;
}
/The figcaption is totally optional, but recommended./
figcaption{
background-color:rgb(245,245,245);
box-shadow:008pxrgba(0,0,0,.2);
height:25px;
letter-spacing:2px;
padding:015px;
text-transform:uppercase;
width:50%;
}
/Required to group and distribute the buttons/
p{
/Tells the element to take up all available space:/
flex-grow:1;
/Tells the flexbox layout system to place items
    toward the right of the container./
justify-content:flex-end;
/Not supported on older browsers; use margins on
    the child elements if such support is needed./
gap:15px;
}
/You can style your buttons however you like/
button{
aspect-ratio:1/1;
border:1pxsolidrgb(195,195,195);
border-radius:50%;
background-color:white;
font-weight:bold;
height:25px;
}

Our result will look something like this:

Please note that if you've chosen to style the buttons exactly as I have, you won't have hover or click states, because the default button style provided by the browser is disabled by our own. You can add these states by using the:hover,:active, and:focus pseudo classes.

As an exercise, you can probably try playing around with these yourself and see what you come up with. I'd be curious to see your results, so don't hesitate to share them with me in the comments!

Looking for more?

If you're interested in learning more about CSS, you can followme right here on DEV or check out myfree content onTwitter,YouTube andTwitch! I'll be dropping more exciting CSS content soon, and I always love hearing from you with your own experiments and projects, so feel free to share them with me!