Wie kann man Buttons mit CSS gestalten

Gestylte Schaltflächen helfen Ihnen bei der Erstellung attraktiver Webseiten. Es gibt viele Stile, die Sie auf die Schaltflächen anwenden können. Hier ist die Anleitung zu den Styling-Buttons.

1. Erstellen Sie ein <Button>

Zuerst erstellen Sie ein Element <button>.

<button type="button">Absenden</button>
Viele Entwickler verwenden auch die folgenden Tags <a>, <input>, <span> oder <div>.

2. Stylen Sie Ihren Button. Jetzt wenden Sie Styles auf Ihre Schaltfläche mithilfe der Klasse an.

button {
display: inline-block;
background-color: #7b38d8;
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

3. Stylen Sie den Hover-Zustand

Der dritte Schritt besteht darin, den Schwebezustand so zu gestalten, dass er dem Benutzer eine visuelle Rückmeldung gibt, wenn sich der Zustand der Schaltfläche ändert.

button:hover {
background-color: green;
}

Lassen Sie uns nun ein interessantes Beispiel mit dem Element <button> sehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      button {
      display: inline-block;
      background-color: #7b38d8;
      border-radius: 10px;
      border: 4px double #cccccc;
      color: #eeeeee;
      text-align: center;
      font-size: 28px;
      padding: 20px;
      width: 200px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
      }
      button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      button:hover {
      background-color: #f7c2f9;
      }
      button:hover span {
      padding-right: 25px;
      }
      button:hover span:after {
      opacity: 1;
      right: 0;
      }
    </style>
  </head>
  <body>
    <h2>Buttons stylen</h2>
    <button>
    <span>Absenden</span>
    </button>
  </body>
</html>

Ein anderes Beispiel mit dem gestylten Button:

In diesem Beispiel haben wir das Element <span> verwendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #560059;
      color:#eeeeee;
      font-family:Arial;
      font-size:16px;
      }
      .wrapper {
      margin: 80px auto;
      text-align: center;
      width: 100%;
      position: relative;
      }
      .button {
      padding: 15px 100px;
      margin:10px 4px;
      color: #eee;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      border:1px solid ;
      }
      .button::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      -webkit-transform: scaleY(.1);
      transform: scaleY(.1);
      transition: all .4s
      }
      .button:hover{
      color:#b414ba;  
      }
      .button:hover::before{
      opacity: 1;
      background-color: #f7c2f9;
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
      transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
      transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity
      }
    </style>
  </head>
  <body>
    <div class="wrapper">   
      <span class="button">Button 1</span>
      <span class="button">Button 2</span>
    </div>
  </body>
</html>

In diesem Beispiel haben wir das Element <a> verwendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #3b0044;
      color:#6098FF;
      font-family:sans-serif;
      font-size:16px;
      }
      .wrapper {
      margin: 80px auto;
      text-align: center;
      width: 100%;
      position: relative;
      }
      .button {
      padding: 15px 100px;
      margin:10px 4px;
      color: #ffffff;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      }
      .button{
      border:1px solid transparent; 
      -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      }
      .button::before {
      content: '';
      position: absolute;
      left: 0px;
      bottom:0px;
      z-index:-1;
      width: 0%;
      height:1px;
      background: #003177;
      box-shadow: inset 0px 0px 0px #b6cdef;
      display: block;
      -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .24, 0, 1)
      }
      .button:hover::before {
      width:100%;
      }
      .button::after {
      content: '';
      position: absolute;
      right: 0px;
      top:0px;
      z-index:-1;
      width: 0%;
      height:1px;
      background: #a9c1e8;
      -webkit-transition: all 0.4s cubic-bezier(.7, .25, 0, 1);
      transition: all 0.4s cubic-bezier(.7, .25, 0,1)
      }
      .button:hover::after {
      width:100%;
      }
      .button:hover{
      border-left:1px solid #b6cdef;
      border-right:1px solid #6098FF;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#" class="button">Button 1</a>
      <a href="#" class="button">Button 2</a>
    </div>
  </body>
</html>

In diesem Beispiel verwenden wir das Element <button>:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .container {
      position: absolute;
      top: 10%;
      }
      .button {
      border: none;
      display: block;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      outline: none;
      overflow: hidden;
      position: relative;
      color: #eeeeee;
      font-weight: 600;
      font-size: 15px;
      background-color: #153f00;
      padding: 15px 50px;
      margin: 0 auto;
      }
      .button span {
      position: relative; 
      z-index: 1;
      }
      .button:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 470%;
      width: 140%;
      background: #52b71f;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
      transform: translateX(-100%) translateY(-25%) rotate(45deg);
      }
      .button:hover:after {
      -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
      transform: translateX(-9%) translateY(-25%) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Style button</h2>
    <div class="container">	
      <button type="button" class="button">
      <span>Hover!</span>
      </button>
    </div>
  </body>
</html>

Ein weiteres Beispiel mit dem Element <button>:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      font-size: 60%;
      background: #00abb7;
      }
      .container {
      padding: 50px;
      }
      button,
      button::after {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }
      button {
      background: none;
      border: 4px solid #fff;
      border-radius: 10px;
      color: #fff;
      display: block;
      font-size: 1.6em;
      font-weight: bold;
      margin: 10px auto;
      padding: 2em 6em;
      position: relative;
      text-transform: uppercase;
      }
      button::before,
      button::after {
      background: #fff;
      content: '';
      position: absolute;
      z-index: -1;
      }
      button:hover {
      color: #29f2e4;
      }
      .button1::after {
      height: 0;
      left: 0;
      top: 0;
      width: 100%;
      }
      .button1:hover:after {
      height: 100%;
      }
      .button2::after {
      height: 100%;
      left: 0;
      top: 0;
      width: 0;
      }
      .button2:hover:after {
      width: 100%;
      }
      .button3::after {
      height: 0;
      left: 50%;
      top: 50%;
      width: 0;
      }
      .button3:hover:after {
      height: 100%;
      left: 0;
      top: 0;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button type="button" class="button1">Button 1</button>
      <button type="button" class="button2">Button 2</button>
      <button type="button" class="button3">Button 3</button>
    </div>
  </body>
</html>

Ein anderes Beispiel mit dem Element <input>:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input {
      padding: 15px 100px;
      margin:10px 4px;
      cursor: pointer;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      }
      input:hover {
      opacity:0.5;}
    </style>
  </head>
  <body>
    <input type="button" value="Button"/>
  </body>
</html>