CSS realizes the effect of gradient button (code example)

This article will share with you the effect of creating a gradient color button. The content is very detailed. Interested friends can take a look at the specific content.

Without further ado, let’s get straight to the point~

The gradient button code is as follows:

button-gradient.css (css file )

.gradientButton{
  border:1px solid #ff6a00;  
  width:100px;  height:28px;  
  background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/
}

button-gradient.html (html file)

    
  
  

  
  
Button
  

  
  

The gradient button effect is as follows:

Gradient button with icon

This code displays an icon on the gradient button.

The code is as follows:

image-button-gradient.css (css file)

#buttonImage {
  background-image:url('/img/search.png');  
  display:inline-block;  
  margin-top:2px;  
  width:16px;  
  height:16px;
}
.flatbutton{
  border:1px solid #3079ed;  
  width:100px;  
  height:28px;  
  background:linear-gradient(to bottom, #9bcfff,#4683ea); 
}

image-button-gradient.html (HTML file)

Description: It is almost the same as the gradient button of the previous string title. To display images, span tags are described in button tags.

The effect is as follows:

The above is the detailed content of CSS realizes the effect of gradient button (code example). For more information, please follow other related articles on the PHP Chinese website!