Advanced Search

Pure CSS Rss Icon

/ Published in: CSS
Save to your folder(s)
Here you can find a Simple RSS icon with CSS, i work with features like transition, transform and radius.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML :
  2.  
  3.  <a id="rss" href="http://www.megawrz.com" target="_blank">
  4.     <span class="dot"></span>
  5.     <span class="line1"></span>
  6.     <span class="line2"></span>
  7. </a>
  8.  
  9.  
  10. CSS :
  11.  
  12. #rss{
  13.     width:60px;
  14.     height:60px;
  15.     background:#F60;
  16.     box-shadow:0 0 2px #000000;
  17.     position:relative;
  18.     padding:10px 10px 10px 10px;
  19.     border-radius:10px;
  20.     display:block;
  21. }
  22.     #rss .dot{
  23.         width:20px;
  24.         height:20px;
  25.         border-radius:50%;
  26.         background:#FFF;
  27.         bottom:10px;
  28.         position:absolute;
  29.         -webkit-transition:all 0.5s ease-in-out;
  30.         -moz-transition:all 0.5s ease-in-out;
  31.         -ms-transition:all 0.5s ease-in-out;
  32.         -o-transition:all 0.5s ease-in-out;
  33.         transition:all 0.5s ease-in-out;
  34.     }
  35.     #rss:hover .dot{
  36.         background:#090;
  37.     }
  38.     #rss .line1{
  39.         width:25px;
  40.         height:25px;
  41.         border-radius:50%;
  42.         border:#FFF 10px solid;
  43.         position:absolute;
  44.         left:-5px;
  45.         bottom:-5px;
  46.         border-color:white transparent transparent transparent;
  47.         -webkit-transform:rotate(40deg) scale(1.5);
  48.         -moz-transform:rotate(40deg) scale(1.5);
  49.         -ms-transform:rotate(40deg) scale(1.5);
  50.         -o-transform:rotate(40deg) scale(1.5);
  51.         transform:rotate(40deg) scale(1.5);
  52.         -webkit-transition:all 1s ease-in-out;
  53.         -moz-transition:all 1s ease-in-out;
  54.         -ms-transition:all 1s ease-in-out;
  55.         -o-transition:all 1s ease-in-out;
  56.         transition:all 1s ease-in-out;
  57.     }
  58.     #rss .line2{
  59.         width:40px;
  60.         height:40px;
  61.         border-radius:50%;
  62.         border:#FFF 10px solid;
  63.         position:absolute;
  64.         left:-8px;
  65.         bottom:-8px;
  66.         border-color:white transparent transparent transparent;
  67.         -webkit-transform:rotate(40deg) scale(1.8);
  68.         -moz-transform:rotate(40deg) scale(1.8);
  69.         -ms-transform:rotate(40deg) scale(1.8);
  70.         -o-transform:rotate(40deg) scale(1.8);
  71.         transform:rotate(40deg) scale(1.8);
  72.         -webkit-transition:all 1.5s ease-in-out;
  73.         -moz-transition:all 1.5s ease-in-out;
  74.         -ms-transition:all 1.5s ease-in-out;
  75.         -o-transition:all 1.5s ease-in-out;
  76.         transition:all 1.5s ease-in-out;
  77.     }
  78.     #rss:hover .line1{
  79.         border-color:#0C0 transparent transparent transparent;
  80.     }
  81.     #rss:hover .line2{
  82.         border-color:#0F0 transparent transparent transparent;
  83.     }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.