Erstellung minimaler runder 3D-Buttons mit CSS

Das werden wir in diesem Tutorial erstellen

Der Basistext für HTML

Wir verwenden eine einfache unsortierte Liste¹ innerhalb eines <nav>-Tags, um unsere Buttons zu erstellen.

<nav>
      
  <ul class="nav">
       
    <li><a href="#" class="icon-home"></a></li>

    <li><a href="#" class="icon-cog"></a></li>

    <li><a href="#" class="icon-cw"></a></li>

    <li><a href="#" class="icon-location"></a></li>

  </ul>

</nav>

Einige Ressourcen

• Diese Icons in den Buttons stammen von der Fontello Icon-Schriftart und Webanwendung.
• Der texturierte Hintergrund stammt von Subtle Patterns.

CSS für die Icon-Schriftart

Es gibt mehrere Möglichkeiten, dies zu tun, aber wir werden diese hier verwenden

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff') format('woff'),
       url('../fonts/fontello.ttf') format('truetype'),
       url('../fonts/fontello.svg#fontello') format('svg');
  font-weight: normal; font-style: normal;
}

[class*=" icon-"] {
  font-family: 'fontello';
  font-style: normal;
  font-size: 3em;
  speak: none;
}

.icon-home:after     { content: "\2302"; } 
.icon-cog:after      { content: "\2699"; } 
.icon-cw:after       { content: "\27f3"; } 
.icon-location:after { content: "\e724"; }

CSS für die Buttons

Die Buttons werden horizontal angeordnet, indem die Listenelemente inline-block gemacht werden. Wir lassen sie mit einem kleinen negativen Margin aneinanderstoßen (oder siehe diese anderen Techniken).

.nav {
  list-style: none;
  text-align: center;
}

.nav li {
  position: relative;
  display: inline-block;
  margin-right: -4px;
}

Die schöne Dreidimensionalität der Buttons ergibt sich aus einem dezenten Farbverlauf und einer Ver-/Entgratungs-Effekt durch ein Paar box-shadows, eines normal und eines inset. Die Breite und Höhe der Buttons sind identisch, wodurch ein Quadrat entsteht, das mit border-radius zu einem Kreis wird. Die line-height entspricht der Höhe und text-align ist auf zentriert gesetzt, sodass die Icons sowohl horizontal als auch vertikal zentriert sind.

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  margin: 36px;
  width: 144px;
  height: 144px;
  position: relative;
  text-align: center;
  line-height: 144px;
  border-radius: 50%;
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

Wir können die Buttons bei :hover etwas abflachen, um einen gedrückten Look zu erzeugen. Sie könnten dies für :active aufheben und etwas anderes für :hover tun, aber das überlassen wir Ihnen.

.nav a:hover{
  text-decoration: none;
  color: #555;
  background: #f5f5f5;
}

An diesem Punkt sollten unsere Buttons so aussehen

Nicht schlecht, aber wir haben noch einen Weg vor uns.

Nun zum unterhaltsamen Teil, wir werden Pseudo-Elemente verwenden, um zusätzliche Elemente zu erhalten, mit denen wir die restlichen Effekte erzielen können. Um die horizontale „Rille“ zu erzeugen, die Sie zwischen jedem Button sehen, werden wir den Pseudo-Selektor :before zu unseren Listenelementen hinzufügen. Mit einem negativen z-index halten wir ihn unter allem. Die doppelten border verleihen ihm den Innenansicht-Look. Die negativen Margins, die wir zuvor bei den Listenelementen verwendet haben, ermöglichen es dieser Rille, kontinuierlich auszusehen. Wir nutzen die absolute Positionierung, um die Linie zu zentrieren.

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}

Für diese zusätzliche Dreidimensionalität erstellen wir einen „Schacht“ um jeden Anker, in dem die Buttons sitzen. Dies können wir wieder ohne zusätzlichen HTML mit einem Pseudo-Element erstellen.

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: -18px;
  left: -18px;
  bottom: -18px;
  right: -18px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: inset 0px 8px 48px #ddd;
}

Die Größe des Schachts (etwas größer als der Button selbst) ergibt sich aus der absoluten Positionierung hinter dem Button und der Streckung durch negative Positionierungswerte (oben/unten/links/rechts). Der 3D-Look ergibt sich diesmal aus einem oberen border und einem inset box-shadow, der einen inneren Schatten erzeugt.

Und wir sind fertig!

Das war gar nicht so schlimm, oder?

Browser-Unterstützung

Diese Buttons verwenden viel CSS3 und einige Pseudo-Elemente, die zu CSS 2.1 gehören. Nichts allzu Progressives. Jede Version von Safari, Chrome, Opera oder Firefox der letzten Jahre wird damit keine Probleme haben. IE 8 kann kein CSS3, daher fällt es auf dies zurück

IE 7 ist ähnlich, nur ohne die „Rillen“-Linie, da es keine Pseudo-Elemente kann. Auch kein großes Ding.

¹ Unsortierte Listen sind möglicherweise nicht ideal für die Navigation. Wir haben sie hier trotzdem verwendet, da wir das zusätzliche Element benötigten.