Using CSS Properties to Create a Cool Button


Using CSS properties alone, recreate this button:

enter image description here

This would be a great test of the candidate’s CSS3 skills. This button is loaded with that kind of stuff. Things I would look for:

  • How did they handle multiple borders? box-shadow is probably the best way here.
  • Did they use text-transform: uppercase; for the text? That would be best.
  • How did they handle the stars? Pseudo elements would be a good candidate there. Did they use unicode? Icon font?
  • Did they catch the subtle text-shadow?
  • How did they split the background in the main part of the button? a linear-gradient with no fade would be a good technique there. Or box-shadow.
  • Were they careful with the nested border-radius?

My solution

a {
  border-radius: 4px;
  border-color : aliceblue;
  background-color: gray;
  padding: 5px;  
  text-decoration: none;
  box-shadow:0px 0px 1px 4px red,
    0px 0px 1px 8px #000000;
  text-shadow:1px 1px #00ffff;
  font-weight: bold;
  background: linear-gradient(180deg, lightgray, gray);

a:before, a:after{

The challenge/question was from here

Written with StackEdit.

Creative Commons Licence
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.