logo

CSS Glowing Icons

Lien d’origine: https://codepen.io/Krishnaa_Gupta/pen/MWoRqmr

HTML:

  1. <center><section class="glowing_icons">
  2. <i class="fab fa-linkedin fa-4x" id="linkedin"></i>
  3. <i class="fab fa-twitter fa-4x" id="twitter"></i>
  4. <i class="fab fa-facebook-square fa-4x" id="facebook"></i>
  5. <i class="fab fa-youtube-square fa-4x" id="youtube"></i>
  6. <i class="fab fa-whatsapp fa-4x" id="whatsapp"></i>
  7. <i class="fab fa-pinterest-square fa-4x" id="pinterest"></i>
  8. <i class="fa fa-envelope-square fa-4x" id="mail"></i>
  9. </section></center>
  10.  

CSS:

  1. .glowing_icons #linkedin,
  2. .glowing_icons #twitter,
  3. .glowing_icons #facebook, 
  4. .glowing_icons #youtube,
  5. .glowing_icons #whatsapp,
  6. .glowing_icons #pinterest,
  7. .glowing_icons #mail {
  8. background-color: #18191f;
  9. color: #fff;
  10. box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
  11. 2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
  12. inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
  13. inset 2px 2px 10px #00000080;
  14. border-radius: 29px;
  15. padding: 11px 19px;
  16. margin: 10px;
  17. animation: animate 3s linear infinite;
  18. text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
  19. 0 0 200px #0072ff;
  20. }
  21. .glowing_icons #twitter {
  22. animation-delay: 0.3s;
  23. }
  24. .glowing_icons #facebook {
  25. animation-delay: 0.7s;
  26. }
  27. .glowing_icons #github {
  28. animation-delay: 0.1s;
  29. }
  30. @keyframes animate {
  31. from {
  32. filter: hue-rotate(0deg);
  33. }
  34. to {
  35. filter: hue-rotate(360deg);
  36. }
  37. }