Barchart Icon in Pure CSS

barchart-icon-in-pure-css.markdown

Barchart Icon in Pure CSS

This is an icon representing a barchart written in pure CSS - you will it find easy to customize to your needs.

A Pen by Sander Nizni on CodePen.

License.

index.html

<a class="chart icon" title="Chart" href="#"></a> 

script.js

/*   NO JS - PURE CSS ONLY */

/*   SANDER SAYS:
     NO WARRANTIES EXPRESSED OR IMPLIED
     FOR USING THIS CODE. THIS OR SIMILAR
     CODE WAS WRITTEN BEFORE, AND IT WILL
     BE WRITTEN AGAIN... BUT IT DOESN'T
     MATTER - BECAUSE WE ARE IN THIS
     TOGETHER. EVERYTHING COULD HAVE BEEN
     ANYTHING ELSE, AND IT WOULD HAVE
     JUST AS MUCH MEANING. C'EST LA VIE.
     COMPLIMENTS? PARTY INVITATIONS?
     RIGHT ON! CONTACT @HYPERABSOLUTE ON
     TWITTER OR ON UXRIG.COM
     STAY AWESOME | HYPERABSOLUTE
*/

style.css

 body { 
    background-color: #666; 
    background-image: -webkit-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%); 
    background-image:    -moz-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%); 
    background-image:         radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%); 
    background-size: 7px 7px; 
    margin: 0 auto; 
    max-width: 720px; 
    padding: 100px 50px 100px; 
    text-align: center; 
} 
a.icon { 
    margin: 12px; 
    background-color: #fed; 
    border: 2px solid #65378F; 
    display: inline-block; 
    position: relative; 
    vertical-align: top; 
} 
a.icon:after, 
a.icon:before { 
    background: #fed; 
    border: 2px solid #65378F; 
    content: ''; 
    position: absolute; 
} 
a.icon:hover, 
a.icon:hover:after, 
a.icon:hover:before { 
    background-color: #65378F; 
} 

/* Chart Icon */ 

a.chart { 
    height: 59px; 
    margin-right: 30px; 
    top:5px; 
    width: 25px; 
} 
a.chart:after, 
a.chart:before { 
    bottom: -1px; 
    width: 25px; 
} 
a.chart:after { 
    height: 80px; 
    left: 35px; 
} 
a.chart:before { 
    height: 45px; 
    left: 70px; 
}