Open In App

How to add a button to an image using CSS ?

Last Updated : 10 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Properties including position relative and position absolute. Use right, left, top, and bottom to define button position.

Using Properties Position, Bottom, and Right

It utilizes the properties position: absolute, bottom: 0, and right: 0 to place a button at the bottom right corner of an image. It offers a clean and integrated visual design, and the values can be adjusted to position the button differently on the image.

Approach

  • Make the basic structure of the web page using <h1> heading, a paragraph <p>, and an image <img> within a container div having class named "imgbox".
  • A button with the class name mybtn is added to the image container. Set the universal selector (*) to include the Google font, box-sizing, and zero margins and padding.
  • Now make element having a class name .imgbox is styled to the position relative to its container and set its width.
  • Give button the class name “.mybtn" and set the position absolute at the bottom-right corner of the image, styled with border radius, font size, and box shadow.

Example: In this example, we will see how to add a button to an image using CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                    initial-scale=1.0">
    <title>Button to an image</title>
    <link rel="stylesheet" 
          href="index.css">
</head>
  
<body>
    <div class="box1">
        <div class="box">
            <h1>GeeksforGeeks</h1>
            <p>
               How to add a button to 
               an image using CSS.
            </p>
            <div class="imgbox">
                <img src=
                     alt="gfg">
                <button class="mybtn">
                    Click Here
                </button>
            </div>
        </div>
    </div>
</body>
  
</html>


CSS




@import url(
  
* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
.imgbox {
    position: relative;
    width: 500px;
}
  
.mybtn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 110px;
    height: 40px;
    border-radius: 20px;
    font-size: 15px;
    border: none;
    box-shadow: rgba(242, 242, 242) 0px 3px 20px;
    transition: 0.3s linear;
    font-weight: 700;
}
  
.mybtn:hover {
    transform: translateY(5px);
}
  
img {
    width: 500px;
    margin: 0;
    padding: 0;
    border-radius: 30px;
    box-shadow: rgb(21, 20, 20) 0px 3px 20px;
}
  
h1 {
    color: rgb(16, 87, 16);
    text-align: center;
    margin-bottom: 20px;
}
  
p {
    font-size: 20px;
    color: palevioletred;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
  
.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


Output:

imgbtn

Using Properties Position, Top, and Left

In this method we will use position property of CSS with top and left property to set the position of button on the image.We will use top:70% and left:40%.

Approach

  • Make the basic structure of the web page using <h1> heading, a paragraph <p>, and an image <img> within a container div having class named "imgbox".
  • A button with the class name mybtn is added to the image container. Set the universal selector (*) to include the Google font, box-sizing, and zero margins and padding.
  • The element having a class name .imgbox is styled to position it relative to its container and set its width.
  • The button having class name “.mybtn" is setting the position absolute with property top 70% and left 40% of the image, styled with border-radius, font size, and box shadow.

Example: In this example we will see how to add a button to an image using CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                    initial-scale=1.0">
    <title>Button to an image</title>
    <link rel="stylesheet" 
          href="index.css">
</head>
  
<body>
    <div class="box1">
        <div class="box">
            <h1>GeeksforGeeks</h1>
            <p>
                How to add a button to
                an image using CSS.
            </p>
            <div class="imgbox">
                <img src=
                     alt="gfg">
                <button class="mybtn">
                    Click Here
                </button>
            </div>
        </div>
    </div>
</body>
  
</html>


CSS




@import url(
  
* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
.imgbox {
    position: relative;
    width: 500px;
}
  
.mybtn {
    position: absolute;
    top: 70%;
    left: 40%;
    width: 110px;
    height: 40px;
    border-radius: 10px;
    font-size: 17px;
    border: none;
    box-shadow: rgba(242, 242, 242) 0px 3px 20px;
    transition: 0.3s linear;
}
  
.mybtn:hover {
    transform: translateY(-5px);
}
  
img {
    width: 500px;
    margin: 0;
    padding: 0;
    border-radius: 30px;
    box-shadow: rgb(21, 20, 20) 0px 3px 20px;
}
  
h1 {
    color: rgb(16, 87, 16);
    text-align: center;
    margin-bottom: 20px;
}
  
p {
    font-size: 20px;
    color: palevioletred;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
  
.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


Output:

imgbtn1



Similar Reads

How to change an input button image using CSS?
The default button in HTML can be changed to an image using CSS. The required button is selected using the respective CSS selector. The background property can then be set to include a background image and change the image type as required. The border of the button can also be removed to show only the image itself. Example-1: Setting an image to th
2 min read
How to add a pressed effect on button click in CSS?
In this tutorial, we are going to learn how to add a pressed effect on a button using CSS. This effect is a part of modern UI design and is used on many websites. This effect allows the user to experience an interaction with the button element as compared to the normal behavior. We’ll take advantage of the active pseudo class. This class is added t
2 min read
How to Add Shadow to Button in CSS ?
This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS. Table of Content Add Shadow on button using box-shadow PropertyAdd Shadow to Button on HoverAdd Shadow to Button usi
3 min read
How to trigger HTML button after hitting enter button in textbox using JavaScript ?
In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the key pressed is ENTER or not. If the key pressed is
4 min read
How to create a radio button similar to toggle button using Bootstrap ?
Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. The WiFi or Bluetooth option in our phone is another exa
3 min read
How to add an image as background image of a web page ?
In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings. Approach: In the body tag, specify a background image in the background attribute by passing the URL of the image or location path.Adding CSS styling pro
2 min read
CSS | Animation to Change the Hover State of a Button/Image
1. To change the color/size of the button in hover state. Approach: Set the animation and time duration of hover stateSet background color using @keyframes Syntax: button:hover { animation-name: background-color; animation-duration: 500ms; } @keyframes background-color { 100% { background-color:#4065F3; } } Examples: C/C++ Code &lt;!DOCTYPE html
2 min read
How to add an image as the list-item marker in a list using CSS ?
The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS. Syntax: list-style-image: none | url | initial | inherit; Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; ul { list-style-image: url( &quot;https://write.geeksforgeeks.org/wp-content/uploads/l
1 min read
How to add filter to the background image using CSS ?
The purpose of this article is to learn how to add filters to an image using CSS. The CSS filter property is used to set the visual effect of an element. This property is mostly used in image content. Syntax: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()
1 min read
How to add a mask to an image using CSS ?
The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image property and its different uses. Syntax: mask-image: non
2 min read