ButtonsLesson 103Free preview

Button on Image

This lesson is part of How To · All levels

Summary

An image button is a button placed on top of an image, usually in the middle or at the corner. So, the image and the button are wrapped in a relative positioned container, and then the button is positioned absolute against that container. This technique is often used on hero banners, product cards, and galleries.

Key points

The wrapping container uses the position: relative as a reference to the position of the button.
The button uses position: absolute to be placed above the image.
The top/left combination of 50% and translate(-50%, -50%) focused the button accurately.
The image is responsive with width: 100% and display: block.
Make sure the contrast of the button is sufficient to the area of the image behind it.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.