Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Teilen Sie mehrere Möglichkeiten zum Erstellen von CSS-Schaltflächen mit angehängtem CSS-Schaltflächenstilcode

yulia
Freigeben: 2018-09-11 14:31:08
Original
7650 Leute haben es durchsucht

Im Projekt werden fast alle Websites Schaltflächen verwenden, von einem Dutzend bis zu wenigen. Ein praktischer und gut aussehender Button kann der Seite viel Farbe verleihen und so die Aufmerksamkeit des Benutzers erregen. In diesem Artikel geht es hauptsächlich um die verschiedenen Schreibmethoden von CSS-Schaltflächen und die Verschönerung von CSS-Schaltflächen. Zum Schluss wird ein allgemeiner Stilcode für CSS-Schaltflächen als Referenz gezeigt. Okay, lesen Sie weiter!

1. Verschiedene Arten, CSS-Schaltflächen zu schreiben

CSS-Schaltflächen können natürlich direkt mit Schaltfläche, mit einem Tag oder mit Eingabe geschrieben werden Sie können verschiedene Stile verwenden, um die gewünschten Stile basierend auf den Eigenschaften jedes Tags festzulegen. Wenn Sie beispielsweise einen Button mit dem Tag „a“ schreiben, verwenden Sie auf jeden Fall das Attribut „text-decoration: none“. Wenn Sie „button“ verwenden, um ihn schön zu schreiben, können Sie das Attribut „border: none“ usw. verwenden.

1. Schaltfläche (kein Stil)

<button>默认按钮</button>
Nach dem Login kopieren

2. Hyperlink einer Beschriftungsschaltfläche

<a href="#" class="button">链接按钮</a>
Nach dem Login kopieren

CSS-Teil:

.button {
       background-color: #4CAF50;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
   }
Nach dem Login kopieren

3 Stile)

<button class="button">按钮</button>
Nach dem Login kopieren

CSS-Teil:

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }
Nach dem Login kopieren
Nach dem Login kopieren

4. Eingabefeld-Schaltfläche

<input type="button" class="button" value="输入框按钮">
Nach dem Login kopieren

CSS-Teil:

.button {
       background-color: #4CAF50;
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       font-size: 16px;
       cursor: pointer;
   }
Nach dem Login kopieren
Nach dem Login kopieren

Rendering:

Teilen Sie mehrere Möglichkeiten zum Erstellen von CSS-Schaltflächen mit angehängtem CSS-Schaltflächenstilcode

2. Allgemeine CSS-Schaltflächenstilcodes

Wenn der Benutzer auf diese Schaltfläche klickt, wird das Bild rechts angezeigt Der Effekt besteht darin, dass die Hintergrundfarbe dunkler wird und der Schatten um die Schaltfläche zu einem inneren Schatten wird.

.div {
  display: inline-block;
  padding: .3em .5em;
  background-image: linear-gradient(#ddd, #bbb);
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px black;
  color: white;
  font-weight: bold;
 }
 .div:active {
  box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;
  border-color: rgba(0, 0, 0, .3);
  background: #bbb;
 }
Nach dem Login kopieren

Bildanzeige:

Teilen Sie mehrere Möglichkeiten zum Erstellen von CSS-Schaltflächen mit angehängtem CSS-SchaltflächenstilcodeTeilen Sie mehrere Möglichkeiten zum Erstellen von CSS-Schaltflächen mit angehängtem CSS-Schaltflächenstilcode

Das Obige stellt vor, welche Methoden zur Herstellung von Schaltflächen verwendet werden können, und zwar um der Sache willen der Schönheit, Sie Welche Stile können festgelegt werden? Abschließend wird ein Beispiel als Referenz für die Lernenden gegeben!

Das obige ist der detaillierte Inhalt vonTeilen Sie mehrere Möglichkeiten zum Erstellen von CSS-Schaltflächen mit angehängtem CSS-Schaltflächenstilcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage