Today I want to share a quick solution for placing a button on top of an image using CSS. This came up for me this week on a site we manage and after setting it up I felt it might be useful for other folks. So I thought I’d bust out a quick post explaining how to do it.
First, the task was to place “Buy Tickets” buttons on the header images for each film on a film festival site. There are about 40 films in the festival and we need to make a button for each page that links to another custom page that contains a shopping cart where folks can purchase their tickets. This also need to be done ASAP. Considering the time restraints and that we needed to make 40 similar buttons, though each linking to a different page, we needed to find a simple, clean solution with minimal changes required to the page structure. There are various was to do this, but I went with a CSS solution that worked well. To begin, the header image on each page is little more than an image link with full width dimensions. This is the image we need to place the button on top of as seen in the picture below.
This is an example of the original code:
<img href=“https://website/images/header1” width=“1024px” height=“350px” alt=“film title”/>
As the image was already in place, I used the following html code to create the HTML structure we would next style with CSS. This is nice solution as it requires very little HTML.
<div class=“button-container”>
<img href=“https://website/images/header1” width=“1024px” height=“350px” alt=“film title”/>
<a href=“add link here” alt=“Buy Tickets”>Tickets</a>
</div>
As you can see I created an anchor link that will be styled into a button and wrapped it and the image in a div container. These three lines of HTML are all the changes that will be required to the page structure. With the HTML in place, it was time to move on to the CSS, where most of the work is done. Below is the complete CSS code I used.
/* Styles ticket buttons used on film description pages*/
.button-container{
display:inline-block;
position:relative;
}
.button-container a{
position: absolute;
bottom:4em;
right:4em;
background-color:#8F0005;
border-radius:1.5em;
color:white;
text-transform:uppercase;
padding:1em 1.5em;
}
First we styled the div class .button-container
, which we set to display as an inline-block and set its position to relative. This allows us to position the “button” above the image. To do so we give the class .button-container a
an absolute position and then define its distance from the bottom and the right side of .button-container
, which contains and is the same size as the image. As we want our button on the bottom-right, this worked perfectly, but you can also use left or top values if you prefer.
Next we styled the button itself by giving the anchor a background color and rounding the corners with a border radius. We then set the text color, transformed the text to uppercase, and added padding between it and the outside border of the background. You don’t have to go with such simple styling, rather you can style the button to your liking.
We then made the button mobile-ready by using a media query to push it to just below the image and before the text block that follows it. After some experimenting, I decided to use only one media query, so I set the media query to a max-width of 600px.
@media only screen and (max-width:600px) {
.button-container{
display:inline-block;
margin-bottom:2em;
}
.button-container a{
position:relative;
bottom:0em;
right:-2em;
background-color:#8F0005;
color:white;
font-size:1em;
padding:1em 1.5em;
text-transform:uppercase;
border-color:white;
border-radius:1.5em;
}
}
I then removed the position from .button-container
and set the position to relative on .button-container a
. After that, I added a 2em margin-bottom to .button-container
to open up space below the image and then adjusted the bottom and right property values on .button-container a
to center the button beneath the image and before the text that followed.
Having that it place, I added some simple hover effects to spruce the button up a little.
.button-container a:hover{
background-color:red;
cursor:pointer;
color:white;
}
This simple solution worked like a charm because after setting up the first button, I was able create the buttons on the remaining 39 pages by simply wrapping each of the header images in the div container and then adding the proper link. Perhaps this simple tutorial will come in handy for someone out there. I’d also be interested in hearing about different approaches that some of you might have taken.
Leave a Reply