CSS Button On Image

Please Share On:

Definition:

Here, I am going to show you how can you put buttons on the image?

First, get your image in a container, and second, add a button on that image.

The process is pretty simple, isn’t it? But, if you don’t know CSS much or you are a beginner, this blog would more helpful for you. I have included source code with output. You can also try yourself by pressing the “TRY IT YOURSELF” button.

Syntax:

.button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    }

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
         .container {
           position: relative;
           width: 100%;
           max-width: 600px;
          }
          
        .container img {
          width: 100%;
          height: auto;
          } 
          
        .container .button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: green;
          color: white;
          padding: 20px 20px;
          text-align: center;
          text-decoration: none;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          background-position: center;
          opacity: 0.6;
  	      transition: background 0.8s;         
         }    
          
         .button:hover {
          	opacity: 1;
          	background: green radial-gradient(circle, transparent 1%, green 1%) center/25000%;
          }
          
         .button:active{
            background-color: #ffffff;
  	        background-size: 100%;
            transition: background 0s;
          }
          
		</style>
	</head>
	
	<body>
	<h2>CSS Button On Image</h2>
  
   <div class="container">
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Button On Image" style="width:100%">
    <button class="button">Button</button>
   </div>

	</body>
</html>

Output:

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 548

Definition:

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.