Overlay buttons on an image with CSS
Roland Taylor
Posted on November 29, 2021
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, a div to wrap our (optional) figcaption and (required) p elements, and a few buttons.
<figure>
<img src="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 include section, p, article, and div. 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 the p element, but you will still need to position the button, as shown with the div and p 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 with
explicitly declared height or width.
- Resets margin and padding on everything in the
browser.
*/
* {
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: the position: absolute; property +
value paair are required, along with at least one
of: bottom, left:, right:, and top:.
*/
div {
justify-content: flex-start;
flex-flow: row nowrap;
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: 0 0 8px rgba(0, 0, 0, .2);
height: 25px;
letter-spacing: 2px;
padding: 0 15px;
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: 1px solid rgb(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 follow me right here on DEV or check out my free content on Twitter, YouTube and Twitch! 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!
Posted on November 29, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related