CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)-CSS-Tutorial-php.cn

CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)

不言

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

Original

18746 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie sich die Erstellung einer Farbverlaufsschaltfläche auswirkt. Interessierte Freunde können sich den spezifischen Inhalt ansehen.

Kommen wir ohne Umschweife gleich zur Sache~

Der Code der Verlaufsschaltfläche lautet wie folgt:

button-gradient. css (CSS-Datei)

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

Nach dem Login kopieren

button-gradient.html (html-Datei)

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

Nach dem Login kopieren

Der Verlaufsschaltflächeneffekt ist wie folgt:

CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)

Verlaufsschaltfläche mit Symbol

Dieser Code zeigt ein Symbol auf der Verlaufsschaltfläche an.

Der Code lautet wie folgt:

image-button-gradient.css (CSS-Datei)

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

Nach dem Login kopieren

image-button-gradient.html (HTML-Datei)

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

Nach dem Login kopieren

Beschreibung: Es ist fast dasselbe wie die Verlaufsschaltfläche des vorherigen String-Titels. Um Bilder anzuzeigen, werden Span-Tags in Button-Tags beschrieben.

Die Wirkung ist wie folgt:

CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)

Das obige ist der detaillierte Inhalt vonCSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!