A Pen by Krishna Gupta on CodePen.
Created
June 7, 2022 17:14
-
-
Save kmjones1979/8dd90d2e86b4c7285889e8f7b09905ef to your computer and use it in GitHub Desktop.
CSS glowing icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>CSS glowing icons</title> | |
<link rel="stylesheet" href="style.css"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<i class="fa fa-apple" id="apple"></i> | |
<i class="fa fa-twitter" id="twitter"></i> | |
<i class="fa fa-github-square github" id="github"></i> | |
<i class="fa fa-facebook-square" id="facebook"></i> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
height: 100vh; | |
width: 100vw; | |
background: #18191f; | |
} | |
.container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
width: 100vw; | |
} | |
#apple, | |
#twitter, | |
#github, | |
#facebook { | |
font-size: 8em; | |
background-color: #18191f; | |
color: #fff; | |
box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080, | |
2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080, | |
inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080, | |
inset 2px 2px 10px #00000080; | |
border-radius: 29px; | |
padding: 11px 19px; | |
margin: 0 40px; | |
animation: animate 3s linear infinite; | |
text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, | |
0 0 200px #0072ff; | |
} | |
#twitter { | |
animation-delay: 0.3s; | |
} | |
#facebook { | |
animation-delay: 0.7s; | |
} | |
#github { | |
animation-delay: 0.1s; | |
} | |
@keyframes animate { | |
from { | |
filter: hue-rotate(0deg); | |
} | |
to { | |
filter: hue-rotate(360deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment