Button Style #01

11. Januar 2015 -13:09 0 Lydia

In diesem Tutorial zeige ich euch wie ich meine Comment Button gemacht, bzw wie ihr einen Button Grafisch ansprechender gestalten könnt. Im Internet gibt es viele schöne Beispiele wie man Buttons mit CSS3 ansprechender gestalten kann. Eine gute Seite, um ein Beispiel zu nennen ist diese hier Codrops die auch Buttons mit Pseudo-Elementen erstellt.

Demo anschaun
CSS Button Allgemein und für alle gültig
.button{
  padding:10px 20px;		/*Der innere Abstand von Text und Rand*/
  margin:15px 15px 15px 0;	/*Abstand zwischen den Elementen  (Oben, Rechts, unten = 15px, Links = 0  )*/
  font: 100% 'Open Sans', serif;/*Schriftfamilie */
  text-align:center; 		/*Text ist zentriert*/
  text-decoration:none;		/*Keine Text Dekoration wie unterstrich*/
}

HTML-Code für Button #01
    <a href="#" class="button btn-01">Demo Button</a>
CSS-Code für Button Stil #01
.btn-01,
.btn-01:visited{
  color: rgba(139, 86, 62,1);		/*Text Farbe*/
  background:rgba(249, 196, 172,1);	/*Hintergrundfarbe*/
  -webkit-border-radius: 2px;
  -moz-border-radius:  2px;	
  border-radius: 2px;			/*Rand Radius für mehrere Browser FF, Chrome etc*/
  border: 5px solid rgba(159, 106, 82,1);/*Border für mehrere Browser FF, Chrome etc*/
}

.btn-01:hover{  /*:hover Aussehen für den Stil, wenn die Maus den Button berührt */
  color: rgba(255, 255, 255,1);  
  background:rgba(209, 156, 132,1);
}

.btn-01:active{  /*:ative ist das Pseudo-Element, und der Press zustand des Buttons*/
  color: rgba(255, 255, 255,1); 
  background:rgba(159, 106, 82,1);
}

HTML-Code für Button #02
    <a href="#" class="button btn-02">Demo Button</a>
CSS-Code für Button Stil #02
.btn-02,
.btn-02:visited{
  color: rgba(139, 86, 62,1);					
  background:rgba(249, 196, 172,1);			
}

.btn-02:hover{  								
  color: rgba(255, 255, 255,1);  
  background:rgba(209, 156, 132,1);
}

.btn-02:active{  								
  color: rgba(255, 255, 255,1); 
  background:rgba(159, 106, 82,1);
}

HTML-Code für Button #03
    <a href="#" class="button btn-03">Demo Button</a>
CSS-Code für Button Stil #03
.btn-03,
.btn-03:visited{
  color: rgba(139, 86, 62,1);					
  background:rgba(249, 196, 172,1);	
  -webkit-border-radius: 2px;
  -moz-border-radius:  2px;	
  border-radius: 2px;							
  border: 5px solid rgba(159, 106, 82,1);		
  -webkit-transition: all 0.5s ease-in-out; 	/*Animation: all -> Alles / 0.5s -> wie lange die ANimation dauert / ease-in-out -> Art der Animation*/
  -moz-transition:all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out; 			
}

.btn-03:hover{  								
  color: rgba(255, 255, 255,1);  
  background:rgba(209, 156, 132,1);
  border: 5px solid rgba(159, 106, 82,0.5);	
}

.btn-03:active{  								
  color: rgba(255, 255, 255,1); 
  background:rgba(159, 106, 82,1);
  border: 5px solid rgba(159, 106, 82,0.25);	
}

HTML-Code für Button #04
    <a href="#" class="button btn-04">Demo Button</a>
CSS-Code für Button Stil #04
.btn-04,
.btn-04:visited{
  color: rgba(139, 86, 62,1);					
  background:rgba(249, 196, 172,1);	
  -webkit-border-radius: 2px;
  -moz-border-radius:  2px;	
  border-radius: 2px;							
  border: 0px solid rgba(159, 106, 82,1);		
  -webkit-transition: all 0.2s ease; 		 
  -moz-transition:all 0.2s ease; 		
  -o-transition: all 0.2s ease; 		
  -ms-transition: all 0.2s ease; 		
  transition:all 0.2s ease; 			
}

.btn-04:hover{  								
  color: rgba(255, 255, 255,1);  
  background:rgba(209, 156, 132,1);
  border: 5px solid rgba(159, 106, 82,0.5);	
  -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5); 	/* Schatten des Buttons - WERTE: Horizontaler Abstand, Vertikaler Abstand, Weicher oder Harter Schatten(0px), Ausdehnungsradius des Schattens, Farbe */
}

.btn-04:active{  								
  color: rgba(255, 255, 255,1); 
  background:rgba(159, 106, 82,1);
  border: 5px solid rgba(159, 106, 82,0.25);
  -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
  box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);	
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.