A Modified Active State for Some Other Awesome CSS3 Buttons

Catalin Rosu just published the article “Just some other awesome CSS3 buttons” that showcases some cool image-less CSS3-only buttons. This article made it to Hacker News, where elii had this comment:

From the technical aspect this is well done because it shows the power of CSS. From a designer’s point of view it is quite far from perfect. The icons look weird and the active state looks quite uninspired with only showing an inner shadow.

The icons don’t bother me as much, but the active state could certainly use a rev or two. Here’s my attempt at a revised active state. Building this solution required me to swap out Red’s use of em units for px units, so I could alter the padding of the active state to give it an “activated, pressed down” look. It’s not quite perfect, but feels better than an inner shadow to me.

Add Edit Delete

And here’s the modified CSS code:

.button
{
  display: inline-block;
  white-space: nowrap;
  background-color: #ccc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background-image: -webkit-linear-gradient(top, #eee, #ccc);
  background-image: -moz-linear-gradient(top, #eee, #ccc);
  background-image: -ms-linear-gradient(top, #eee, #ccc);
  background-image: -o-linear-gradient(top, #eee, #ccc);
  background-image: linear-gradient(top, #eee, #ccc);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
  border: 1px solid #777;
  padding: 0 30px;
  margin: 10px;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 0.5px 0 rgba(0,0,0,.3);
  -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 0.5px rgba(0,0,0,.3);
  box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 0.5px 0 rgba(0,0,0,.3);
}

.button:hover
{
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
  background-image: -moz-linear-gradient(top, #fafafa, #ddd);
  background-image: -ms-linear-gradient(top, #fafafa, #ddd);
  background-image: -o-linear-gradient(top, #fafafa, #ddd);
  background-image: linear-gradient(top, #fafafa, #ddd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}

.button:active
{
  background-color: #ccc;
  color: #f93;
  text-shadow: 0 0 2px rgba(255,255,255,.8);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
  background-image: -webkit-linear-gradient(top, #ccc, #eee);
  background-image: -moz-linear-gradient(top, #ccc, #eee);
  background-image: -ms-linear-gradient(top, #ccc, #eee);
  background-image: -o-linear-gradient(top, #ccc, #eee);
  background-image: linear-gradient(top, #ccc, #eee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccc', EndColorStr='#eee');
}

.button:focus
{
  outline: 0;
  background: #fafafa;
}    

.button:before
{
  background: #ccc;
  background: rgba(0,0,0,.1);
  float: left;
  width: 28px;
  text-align: center;
  font-size: 1.5em;
  margin: 0 25px 0 -29px;
  padding: 0 3px;
  -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}


/* Hexadecimal entities for the icons */

.add:before
{
  content: "\271A";
}

.edit:before
{
  content: "\270E";
}

.delete:before
{
  content: "\2718";
}

.save:before
{
  content: "\2714";
}

.email:before
{
  content: "\2709";
}

.like:before
{
  content: "\2764";
}

.next:before
{
  content: "\279C";
}

.star:before
{
  content: "\2605";
}

.spark:before
{
  content: "\2737";
}

.play:before
{
  content: "\25B6";
}

If you’ve got some suggestions for a better active state, let me know. Thanks!