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.


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.