Cool CSS3 Hover Effects Social Icons

Developer
Daniesy
Size
2,605 Kb
Views
6,072
  1. Cool CSS3 Hover Effects Social Icons Previews
  2. Cool CSS3 Hover Effects Social Icons HTML Codes
  3. Cool CSS3 Hover Effects Social Icons CSS Codes

How do I make an cool css3 hover effects social icons?

What is a cool css3 hover effects social icons? How do you make a cool css3 hover effects social icons? This script and codes were developed by Daniesy on 10 January 2023, Tuesday.

Cool CSS3 Hover Effects Social Icons Previews
IQ Test

Cool CSS3 Hover Effects Social Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool CSS3 Hover Effects Social Icons </title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @font-face { font-family: 'icomoon'; src:url('http://fontmagnet.com/fonts/icomoon.eot'); src:url('http://fontmagnet.com/fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('http://fontmagnet.com/fonts/icomoon.woff') format('woff'), url('http://fontmagnet.com/fonts/icomoon.ttf') format('truetype'), url('http://fontmagnet.com/fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;
}
a{ text-decoration: none;
}
.social{ width: 400px; position:relative; margin: 50px auto;
}
.social a{ position: relative; display: inline-block; font-family: "icomoon"; font-size: 1.2em; width: 40px; height: 40px; line-height: 40px; color: white; border-radius: 50%; text-align: center; margin-right: 30px; font-smoothing: antialiased;
}
.social .fb{ background: #46629E;
}
.social .fb:before,
.social .fb:after{ border-color: #46629E;
}
.social .tw{ background: #00ACEE;
}
.social .tw:before,
.social .tw:after{ border-color: #00ACEE;
}
.social .gp{ background: #DD4B39;
}
.social .gp:before,
.social .gp:after
{ border-color: #DD4B39;
}
.social a:before,
.social a:after{ content: ""; display: block; position: absolute; background: transparent; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; transition: .3s all; border: 3px solid;
}
.social a:hover:after{ -webkit-transform: scale(1.5);
}
.social a:hover:before{ -webkit-transform: scale(2); transition: .3s all; opacity: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="social"> <a href="" class="icon fb"></a> <a href="" class="icon tw"></a> <a href="" class="icon gp"></a>
</section>
</body>
</html>

Cool CSS3 Hover Effects Social Icons - Script Codes CSS Codes

@font-face { font-family: 'icomoon'; src:url('http://fontmagnet.com/fonts/icomoon.eot'); src:url('http://fontmagnet.com/fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('http://fontmagnet.com/fonts/icomoon.woff') format('woff'), url('http://fontmagnet.com/fonts/icomoon.ttf') format('truetype'), url('http://fontmagnet.com/fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;
}
a{ text-decoration: none;
}
.social{ width: 400px; position:relative; margin: 50px auto;
}
.social a{ position: relative; display: inline-block; font-family: "icomoon"; font-size: 1.2em; width: 40px; height: 40px; line-height: 40px; color: white; border-radius: 50%; text-align: center; margin-right: 30px; font-smoothing: antialiased;
}
.social .fb{ background: #46629E;
}
.social .fb:before,
.social .fb:after{ border-color: #46629E;
}
.social .tw{ background: #00ACEE;
}
.social .tw:before,
.social .tw:after{ border-color: #00ACEE;
}
.social .gp{ background: #DD4B39;
}
.social .gp:before,
.social .gp:after
{ border-color: #DD4B39;
}
.social a:before,
.social a:after{ content: ""; display: block; position: absolute; background: transparent; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; transition: .3s all; border: 3px solid;
}
.social a:hover:after{ -webkit-transform: scale(1.5);
}
.social a:hover:before{ -webkit-transform: scale(2); transition: .3s all; opacity: 0;
}
Cool CSS3 Hover Effects Social Icons - Script Codes
Cool CSS3 Hover Effects Social Icons - Script Codes
Home Page Home
Developer Daniesy
Username daniesy
Uploaded January 10, 2023
Rating 3
Size 2,605 Kb
Views 6,072
Do you need developer help for Cool CSS3 Hover Effects Social Icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniesy (daniesy) Script Codes
Name
Grand Theft Auto 5
Badge 2
Hot or Not 2 - Image masking with icons
Badge certified
CSS Switches
MSlider 3D
OsX Mavericks
Profile pictures
Beautiful Flat Text Slider
Simple Dropdown - Vue.js
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!