CSS3 3D iso Button

3 techniques différentes

by toubia95

HTML

<div><a href="#">Actualités</a></div>

CSS

body { padding: 50px; }

/* 3D bouton v1 */
/* triangles (borders) in pseudo-elements */

/*
a {
  display: inline;
  padding: 10px 20px;
  font-size: 15px;
  background:#ccc;
  color:#fff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: -1px 0px 0px #ddd,0px -1px 0px #999;
  margin: 30px;
  border-left: 10px solid #ddd;
  border-bottom: 10px solid #999;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 20px 0px #bbb;
  -moz-box-shadow: inset 0px 0px 20px 0px #bbb;
  box-shadow: inset 0px 0px 20px 0px #bbb;
}

a::after, a::before {
  content:"";
  display: block;
  position: absolute;  
}

a::before {
  border-left: 10px solid #fff;
  border-bottom: 10px solid #ddd;
  left: -10px;
  top: 0;
}

a::after {
  border-left: 10px solid #999;
  border-bottom: 10px solid #fff;
  right: 0;
  bottom: -10px;
}
*/

/* 3D bouton v2 */
/* gradients in pseudo-elements */

/*
a {
  display: inline;
  padding: 10px 20px;
  font-size: 15px;
  background:#ccc;
  color:#fff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: -1px 0px 0px #ddd,0px -1px 0px #999;
  margin: 30px;
  border-left: 10px solid #ddd;
  border-bottom: 10px solid #999;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 20px 0px #bbb;
  -moz-box-shadow: inset 0px 0px 20px 0px #bbb;
  box-shadow: inset 0px 0px 20px 0px #bbb;
}

a::after, a::before {
  content:"";
  display: block;
  position: absolute; 
  width: 10px;
  height: 10px;
}

a::before {
  background-image: -moz-linear-gradient(-45deg, #fff 50%, #ddd 0);
  left: -10px;
  top: 0;
}

a::after {
  right: 0;
  bottom: -10px;
  background-image: -moz-linear-gradient(-45deg, #999 50%, #fff 0);
}
*/

/* 3D bouton v3 */
/* scaled and rotated pseudo-elements */

a {
  display: inline;
  padding: 10px 20px;
  font-size: 15px;
  background:#ccc;
  color:#fff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: -1px 0px 0px #ddd,0px -1px 0px #999;
  margin: 30px;
  position: relative;
 ...