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

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>

2. Hyperlink einer Beschriftungsschaltfläche

<a href="#" class="button">链接按钮</a>

CSS-Teil:

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

3 Stile)

<button class="button">按钮</button>

CSS-Teil:

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

4. Eingabefeld-Schaltfläche

<input type="button" class="button" value="输入框按钮">

CSS-Teil:

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

Rendering:

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

Bildanzeige:

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!