Pure CSS GUI Icons

by Nicolas Gallagher

HTML

<ul>
    <li class="power">
<a>*</a>

    </li>
</ul>

CSS

p::before, p:after {
    content:"##";
}


ul {
    padding:0;
    margin:0;
}

li {
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:0 0 0.25em;
}

li a:link,
li a:visited {
    display:block;
    border:0;
    padding-left:28px;
    color:#c55500;
}

li a:hover,
li a:focus,
li a:active {
    color:#730800;
    background:transparent;
}

li:before,
li:after,
li a:before,
li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}

li a:before,
li a:after {
    margin:-8px 0 0;
    background:#c55500;
}

li a:hover:before,
li a:focus:before,
li a:active:before {
    background:#730800;
}

.power a:before {
    left:1px;
    width:10px;
    height:10px;
    border:2px solid #c55500;
    margin-top:-6px;
    background:transparent;
    /* css3 */
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.power a:after {
    left:6px;
    width:2px;
    height:7px;
    border:1px solid #fff;
    margin:-8px 0 0;
    background:#c55500;
}



.power a:hover:after,
.power a:focus:after,
.power a:active:after {
    background:#730800;
}