├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | ![socialicon](https://github.com/codeaashu/Hover-Effect-On-Icons/assets/130897584/8a89c5ed-554e-46ec-8b56-e3b8f49697de) 2 | # Hover-Effect-On-Icons 3 | Creating Amazing animated Hover Effect On Icons using HTML & CSS. 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Amazing Hover Effect On Icons | CODE AASHU 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

Social Media Icons

17 | 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Poppins', sans-serif; 9 | } 10 | 11 | 12 | .container{ 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | width: 100%; 17 | height: 100vh; 18 | background-color: #ffffff; 19 | flex-wrap: wrap; 20 | flex-direction: column; 21 | } 22 | 23 | .container h1{ 24 | font-size: 40px; 25 | line-height: 5; 26 | text-transform: uppercase; 27 | letter-spacing: 0.1em; 28 | font-weight: 300; 29 | } 30 | 31 | .social{ 32 | display: flex; 33 | gap: 30px; 34 | } 35 | 36 | .social a{ 37 | position: relative; 38 | width: 80px; 39 | height: 80px; 40 | text-align: center; 41 | text-decoration: none; 42 | color: #000; 43 | background: linear-gradient(145deg, #ffffff, #d9e0e6); 44 | box-shadow: inset 6px 6px 14px #8e9396, 45 | inset -6px -6px 14px #ffffff; 46 | border-radius: 25px; 47 | overflow: hidden; 48 | } 49 | 50 | .social a .fa-brands{ 51 | position: relative; 52 | font-size: 30px; 53 | line-height: 80px; 54 | z-index: 2; 55 | transition: color 0.5s; 56 | 57 | } 58 | 59 | .social a::after{ 60 | content: ''; 61 | width: 100%; 62 | height: 100%; 63 | top: -90px; 64 | left: 0; 65 | background: linear-gradient(-45deg, #12c2e9, #c471ed, #f64f59); 66 | position: absolute; 67 | border-radius: 25px; 68 | transition: 0.5s ease; 69 | } 70 | 71 | .social a:hover::after{ 72 | top: 0; 73 | } 74 | 75 | 76 | .social a:hover .fa-brands{ 77 | color: #fff; 78 | text-shadow: 1px 2px 14px #8e93969c, 79 | -1px -2px 14px #ffffffb7; 80 | } --------------------------------------------------------------------------------