Return to Snippet

Revision: 57194
at May 20, 2012 23:14 by jntu_gnec


Initial Code
HTML :

 <a id="rss" href="http://www.megawrz.com" target="_blank">
    <span class="dot"></span>
    <span class="line1"></span>
    <span class="line2"></span>
</a>


CSS :

#rss{
    width:60px;
    height:60px;
    background:#F60;
    box-shadow:0 0 2px #000000;
    position:relative;
    padding:10px 10px 10px 10px;
    border-radius:10px;
    display:block;
}
    #rss .dot{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#FFF;
        bottom:10px;
        position:absolute;
        -webkit-transition:all 0.5s ease-in-out;
        -moz-transition:all 0.5s ease-in-out;
        -ms-transition:all 0.5s ease-in-out;
        -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
    }
    #rss:hover .dot{
        background:#090;
    }
    #rss .line1{
        width:25px;
        height:25px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-5px;
        bottom:-5px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.5);
        -moz-transform:rotate(40deg) scale(1.5);
        -ms-transform:rotate(40deg) scale(1.5);
        -o-transform:rotate(40deg) scale(1.5);
        transform:rotate(40deg) scale(1.5);
        -webkit-transition:all 1s ease-in-out;
        -moz-transition:all 1s ease-in-out;
        -ms-transition:all 1s ease-in-out;
        -o-transition:all 1s ease-in-out;
        transition:all 1s ease-in-out;
    }
    #rss .line2{
        width:40px;
        height:40px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-8px;
        bottom:-8px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.8);
        -moz-transform:rotate(40deg) scale(1.8);
        -ms-transform:rotate(40deg) scale(1.8);
        -o-transform:rotate(40deg) scale(1.8);
        transform:rotate(40deg) scale(1.8);
        -webkit-transition:all 1.5s ease-in-out;
        -moz-transition:all 1.5s ease-in-out;
        -ms-transition:all 1.5s ease-in-out;
        -o-transition:all 1.5s ease-in-out;
        transition:all 1.5s ease-in-out;
    }
    #rss:hover .line1{
        border-color:#0C0 transparent transparent transparent;
    }
    #rss:hover .line2{
        border-color:#0F0 transparent transparent transparent;
    }

Initial URL
http://www.megawrz.com/css/190484-pure-css-rss-icon.html

Initial Description
Here you can find a Simple RSS icon with CSS, i work with features like transition, transform and radius.

Initial Title
Pure CSS Rss Icon

Initial Tags


Initial Language
CSS