How to add a background image to a button in CSS (detailed explanation and examples)

You can add beautiful pictures to articles here with buttons, allowing you to easily change the style of the page. You can use a gradient background; the button's background can change the color of the button; you can use overflow: hidden and remove the mask.

Here, use top, left, right, and bottom to adjust the height and width to cover the button, plus the gradient and transparency mentioned above. We divide the mask into upper and lower parts. The upper one uses a gradient background, and the lower one only needs to use a solid color. (In fact, it can also be achieved with one mask, but there is no way to make the border of the mask gradient, so use two ). The code is like this: The CSS code is as follows:

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

Actually, I don’t fully understand how to use CSS3 gradient, so I won’t explain it here for fear of making a mistake. When doing this, I followed the examples in the official documentation.

Gecko: https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit: http://webkit. org/blog/175/introducing-css-gradients/

OK, the mask layer is done, now let’s make the button. The button layer must provide positioning for the mask, and set the size and color of the button. For the sake of beauty, we add rounded corners and shadows to it, which is also the content of CSS3. The following is the code: The CSS code is as follows:

.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

Change the background of .button to change the color of the button. Note that the border-radius of the button should be set to be the same as that of the mask layer. I tried to add overflow: hidden to the button and then remove the border-radius of the mask. Despite this, the four corners of the mask are still displayed. Why? Please ask experts for guidance. Next, there is the text part of the button. This layer should be above the mask layer so that the text can be clearly displayed. Like the mask layer, set absolute positioning, and set the height and width to 100%. Since our text layer is behind the mask layer in the document flow, there is no need to set z-index. The code is as follows: The CSS code is as follows:

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

At this point, our button is ready. The advantage of this button is that it does not use pictures, reduces the number of HTTP connections, and of course reduces traffic. The disadvantage is that this button is of little use now, because IE does not support CSS3 so far. Although there are filters, it is not as fast as using pictures. I wish IE will be eliminated soon.

Recommended learning: CSS video tutorial

The above is the detailed content of How to add a background image to a button in CSS (detailed explanation and examples). For more information, please follow other related articles on the PHP Chinese website!