WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Glowing Social Media Icons Hover
1669
ledoc
Open In Editor
Publish Your Code
Recommended
14 September 2024
Hover slider (dark/light)
30 March 2025
Zig-zag border & cool hover effect
23 March 2025
Button Hover Glow
HTML
Copy
CSS
Copy
<style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: black; width: 100px; height: 100vh; } .main{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; cursor: pointer; } .icon{ position: relative; width: 80px; height: 80px; margin: 20px; border-radius: 50px; transition: all .8s; } .icon:hover{ background: #e60073; box-shadow: 0 0 20px #e60073; } .icon:hover:nth-child(2){ background: #1877f2; box-shadow: 0 0 20px #1877f2; } .icon:hover:nth-child(3){ background: #25d366; box-shadow: 0 0 20px #25d366; } .icon:hover:nth-child(4){ background: #1da1f2; box-shadow: 0 0 20px #1da1f2; } .icon i{ color: white; position: absolute;; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2em; } svg circle{ stroke-dasharray: 150; transition: all .8s; } .icon:hover svg circle{ stroke-dasharray: 220; } </style>
JS
Copy