Heim > Artikel > Web-Frontend > CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)

CSS realisiert den Effekt der Verlaufsschaltfläche (Codebeispiel)

不言Original: 2018-11-09 17:25:0818672Durchsuche

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

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>

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Methode zum Festlegen des Textzeilenabstands in CSS (Codebeispiel)Nächster Artikel：Einführung in die Methode zum Festlegen des Textzeilenabstands in CSS (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen