title: Pure CSS3 icon without nested SPANs
body: <p>I'm creating pure CSS3 icons. The way I'm doing it now requires me to have multiple levels of nested SPANs in some cases.</p>
  
  <p>The parent SPAN is used in most cases for the icon's background. Then I use :before and :after to insert more elements.
  If I need more than two additional elements, I need to put more SPANs into the parent, which I can also fill up and insert with :before and :after.</p>
  
  <p>This method works nicely, but it would be nice if I could eliminate HTML that looks like this:</p>
  
  <pre><code>&lt;span class="btn"&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>So I'm wondering if there's a better way?
  Some examples below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.softwareBtn {
    position: relative;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-image: linear-gradient(#908dbe, #5e5c84, #5e5c84, #908dbe);
    display: block;
  }
  .softwareBtn:before,
  .softwareBtn span:nth-child(1):before,
  .softwareBtn span:nth-child(1):after,
  .softwareBtn span:nth-child(2):before,
  .softwareBtn span:nth-child(2):after,
  .softwareBtn span:nth-child(3):before,
  .softwareBtn span:nth-child(3):after {
    content: '';
    position: absolute;
    display: block;
  }
  .softwareBtn:before {
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border: 4px solid black;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .softwareBtn span:nth-child(1):before,
  .softwareBtn span:nth-child(2):before,
  .softwareBtn span:nth-child(2):after {
    top: 4px;
    right: 13px;
    width: 3px;
    height: 15px;
    border: solid black;
    border-width: 3px 0 3px 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  .softwareBtn span:nth-child(1):after {
    top: 13px;
    right: 4px;
    width: 15px;
    height: 3px;
    border: solid black;
    border-width: 0 3px 0 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  .softwareBtn span:nth-child(2):before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }
  .softwareBtn span:nth-child(2):after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
  }
  .softwareBtn span:nth-child(3):before {
    bottom: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-image: linear-gradient(to top right, #999, black, #999);
  }
  .softwareBtn span:nth-child(3):after {
    bottom: 9px;
    left: 9px;
    width: 2px;
    height: 2px;
    border: 2px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .emailBtn {
    position: relative;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-image: linear-gradient(#908dbe, #5e5c84, #5e5c84, #908dbe);
    display: block;
  }
  .emailBtn:before,
  .emailBtn:after,
  .emailBtn span:before,
  .emailBtn span:after {
    content: '';
    position: absolute;
    display: block;
  }
  .emailBtn:before {
    top: 7px;
    left: 3px;
    width: 26px;
    height: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: linear-gradient(to top right, #d6f1e9, #fff);
  }
  .emailBtn:after {
    top: -1px;
    left: 7px;
    width: 17px;
    height: 17px;
    border: solid black;
    border-width: 0 0 1px 1px;
    -webkit-border-radius: 1px 0 1px 3px;
    -moz-border-radius: 1px 0 1px 3px;
    border-radius: 1px 0 1px 3px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
  }
  .emailBtn span:before,
  .emailBtn span:after {
    top: 20px;
    width: 12px;
    height: 0;
    border-top: 1px solid black;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
  }
  .emailBtn span:before {
    left: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
  }
  .emailBtn span:after {
    right: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="softwareBtn"&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;br /&gt;
  &lt;span class="emailBtn"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>