Learn to code - How to make Button on Image





Learn how to create button image using CSS.




html guide

Try yourself >>


Instructions

1: Add HTML lines:


Code Example:

                
                
                
                <div class="container5">
  <img src="../img/space1.jpg" alt="space" style="width:100%">
  <button class="btn5">Lets fly</button>
</div>
                
                
              
                
            

1: Add CSS style:


Code Example:

                
                
                
                <style>

.container5 {
  position: relative;
  width: 100%;
  max-width: 500px; 
}

.container5 img {
  width: 100%;
  height: auto;
  border-radius:20px;
}

.container5 .btn5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container5 .btn5:hover {
  background-color: black;
}

// the style below is for mobile and small screens


@media only screen and (max-width: 800px) 
{ 
    .container5 {
      width: 100%;
position: relative;
left:0px;
max-width: 400px;
}
}
</style>
                
                
              
                
            
Try yourself >>




with FreeCodeWiki, you can learn to code, we offer free coding courses, our website is free and always will be, our main goal is to allow students to learn to code for free in one place.


Navigation