CSS realizes the effect of gradient button (code example)-CSS Tutorial-php.cn

CSS realizes the effect of gradient button (code example)

不言

Release： 2018-11-09 17:26:03

Original

18720 people have browsed it

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);/*设置按钮为渐变颜色*/
}

Copy after login

button-gradient.html (html file)

<!DOCTYPE html>
<html xmlns=" 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="button-gradient.css" />
  </head>
  <body>
  <div><button type="submit" class="gradientButton">Button</button></div>
  <hr />
  </body>
  </html>

Copy after login

The gradient button effect is as follows:

CSS realizes the effect of gradient button (code example)

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(&#39;/img/search.png&#39;);  
  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); 
}

Copy after login

image-button-gradient.html (HTML file)

<!DOCTYPE html>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="image-button-gradient.css" />
  </head>
  <body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
  </body>
  </html>

Copy after login

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:

CSS realizes the effect of gradient button (code example)

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!