Home > Article > Web Front-end > CSS realizes the effect of gradient button (code example)

CSS realizes the effect of gradient button (code example)

不言Original: 2018-11-09 17:25:0818716browse

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)

<!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>

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); 
}

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the method of setting text line spacing in CSS (code example)Next article：Introduction to the method of setting text line spacing in CSS (code example)

See more

CSS realizes the effect of gradient button (code example)

Related articles