Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/all-social-media-icons-shape.markdown

Created May 9, 2021 11:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/d0bc0f9c20a99e16b591097b8a38b12d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/d0bc0f9c20a99e16b591097b8a38b12d to your computer and use it in GitHub Desktop.
Download ZIP
All Social Media Icons Shape
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>All social media Icons</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css
">
<link rel="stylesheet" href="social.css">
</head>
<style>
/*cols*/
.social-icons{
text-align: center;
}
/*
.social-icons .style-1:not(:last-child){
margin-right:0.6rem;
}
*/
.style {
display: inline-block;
height: 52px;
width: 52px;
background-color: white;
padding: 5px 5px;
margin: 5px;
box-shadow: 2px 1px 3px 2px #383838;
position: relative;
}
.style .fab {
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.style:hover {
color: white;
}
/*For the circle buttom*/
.amz-btn-circle {
border-radius: 50%;
}
/*For the rounded corner buttom */
.amz-btn-round {
border-radius: 20%;
}
h1{
text-align:center;
color:blue;
}
/*social media cols color define*/
.col-rev-facebook {
color: #3b5998;
color: rgb(59, 89, 152);
}
.col-rev-facebook:hover {
background-color: #3b5998;
}
.col-rev-twitter {
color: #00aced;
color: rgb(0, 172, 237);
}
.col-rev-twitter:hover {
background-color: #00aced;
}
.col-rev-youtube {
color: #bb0000;
color: rgb(187, 0, 0);
}
.col-rev-youtube:hover {
background-color: #bb0000;
}
.style-c.col-rev-youtube:hover {
background-color: #bb0000;
}
.col-rev-googleplus {
color: #dd4b39;
color: rgb(221, 75, 57);
}
.col-rev-googleplus:hover {
background-color: #dd4b39;
}
.col-rev-rss {
color: #f26522;
color: rgb(242, 101, 34);
}
.col-rev-rss:hover {
background-color: #f26522;
}
.col-rev-pinterest {
color: #cb2027;
color: rgb(203, 32, 39);
}
.col-rev-pinterest:hover {
background-color: #cb2027;
}
.col-rev-linkedin {
color: #007bb6;
color: rgb(0, 123, 182);
}
.col-rev-linkedin:hover {
background-color: #007bb6;
}
.col-rev-vimeo {
color: #1ab7ea;
color: rgb(26, 183, 234);
}
.col-rev-vimeo:hover {
background-color:#1ab7ea;
}
.col-rev-tumblr {
color: #32506d;
color: rgb(50, 80, 109);
}
.col-rev-tumblr:hover {
background-color: #32506d;
}
.col-rev-instagram {
color: #bc2a8d;
}
.col-rev-instagram:hover {
background-color: #bc2a8d;
}
.col-rev-flickr {
color: #ff0084;
color: rgb(255, 0, 132);
}
.col-rev-flickr:hover {
background-color: #ff0084;
}
.col-rev-dribbble {
color: #ea4c89;
color: rgb(234, 76, 137);
}
.col-rev-dribbble:hover {
background-color: #ea4c89;
}
.col-rev-quora {
color: #a82400;
color: rgb(168, 36, 0);
}
.col-rev-quora:hover {
background-color: #a82400;
}
.col-rev-foursquare {
color: #0072b1;
color: rgb(0, 114, 177)
}
.col-rev-foursquare:hover {
background-color:#0072b1 ;
}
.col-rev-vk {
color: #45668e;
color: rgb(69, 102, 142);
}
.col-rev-vk:hover {
background-color: #45668e ;
}
.col-rev-wordpress {
color: #21759b;
color: rgb(33, 117, 155);
}
.col-rev-wordpress:hover {
background-color:#21759b ;
}
.col-rev-stumbleupon {
color: #EB4823;
color: rgb(235, 72, 35);
}
.col-rev-stumbleupon:hover {
background-color: #EB4823 ;
}
.col-rev-yahoo {
color: #7B0099;
color: rgb(123, 0, 153);
}
.col-rev-yahoo:hover {
background-color: #7B0099 ;
}
.col-rev-blogger {
color: #fb8f3d;
color: rgb(251, 143, 61);
}
.col-rev-blogger:hover {
background-color: #fb8f3d ;
}
.col-rev-whatsapp {
color: #25d366;
color: rgb(37, 211, 102);
}
.col-rev-whatsapp:hover {
background-color: #25d366 ;
}
.col-rev-apple {
color: #a6b1b7;
color: rgb(166, 177, 183);
}
.col-rev-apple:hover {
background-color: #a6b1b7 ;
}
.col-rev-soundcloud {
color: #ff3a00;
color: rgb(255, 58, 0);
}
.col-rev-soundcloud:hover {
background-color:#ff3a00 ;
}
.col-rev-amazon {
color: #ff9900;
color: rgb(255, 153, 0);
}
.col-rev-amazon:hover {
background-color: #ff9900 ;
}
.col-rev-skype {
color: #00aff0;
color: rgb(0, 175, 240);
}
.col-rev-skype:hover {
background-color:#00aff0 ;
}
.col-rev-android {
color: #a4c639;
color: rgb( 164, 198, 57 );
}
.col-rev-android:hover {
background-color:#a4c639 ;
}
.col-rev-500px {
color: #0099e5 ;
color: rgb(0, 153, 229);
}
.col-rev-500px:hover {
background-color: #0099e5 ;
}
.col-rev-vine {
color: #00b489 ;
}
.col-rev-vine:hover {
background-color: #00b489 ;
}
.col-rev-messenger {
color: #0084ff ;
}
.col-rev-messenger:hover {
background-color: #0084ff ;
}
.col-rev-telegram {
color: #0088CC ;
}
.col-rev-telegram:hover {
background-color: #0088CC ;
}
.col-rev-github {
color: #00405d ;
color: rgb(0, 64, 93);
}
.col-rev-github:hover {
background-color: #00405d ;
}
.col-rev-snapchat {
color: #fffa37 ;
color: rgb( 255,250,55 );
}
.col-rev-snapchat:hover {
background-color: #fffa37 ;
}
</style>
<body>
<h1>All Social Media Icons Shape</h1>
<h3 style="text-align:center">Click the button once</h3>
<div class="social-icons">
<!-- facebook-->
<span class="style amz-btn-circle col-rev-facebook"> <i class="fab fa-facebook-f"></i> </span>
<!-- twitter-->
<span class="style amz-btn-circle col-rev-twitter"> <i class="fab fa-twitter"></i> </span>
<!-- googleplus-->
<span class="style amz-btn-circle col-rev-googleplus"> <i class="fab fa-google-plus-g"></i> </span>
<!-- youtube-->
<span class="style amz-btn-circle col-rev-youtube"> <i class="fab fa-youtube"> </i></span>
<!-- rss-->
<span class="style amz-btn-circle col-rev-rss"> <i class="fab fas fa-rss"> </i></span>
<!-- pinterest-->
<span class="style amz-btn-circle col-rev-pinterest"> <i class="fab fa-pinterest-p"> </i></span>
<!-- youtube-->
<span class="style amz-btn-circle col-rev-linkedin"> <i class="fab fa-linkedin-in"> </i></span>
<!-- vimeo-->
<span class="style amz-btn-circle col-rev-vimeo"> <i class="fab fa-vimeo-v"> </i></span>
<!-- tumblr-->
<span class="style amz-btn-circle col-rev-tumblr"> <i class="fab fa-tumblr"> </i></span>
<!-- instagram-->
<span class="style amz-btn-circle col-rev-instagram"> <i class="fab fa-instagram"> </i></span>
<!-- flickr-->
<span class="style amz-btn-circle col-rev-flickr"> <i class="fab fa-flickr"> </i></span>
<!-- dribbble-->
<span class="style amz-btn-circle col-rev-dribbble"> <i class="fab fa-dribbble"> </i></span>
<!-- quora-->
<span class="style amz-btn-circle col-rev-quora"> <i class="fab fa-quora"> </i></span>
<!-- foursquare-->
<span class="style amz-btn-circle col-rev-foursquare"> <i class="fab fa-foursquare"> </i></span>
<!-- vk-->
<span class="style amz-btn-circle col-rev-vk"> <i class="fab fa-vk"> </i></span>
<!-- wordpress-->
<span class="style amz-btn-circle col-rev-wordpress"> <i class="fab fa-wordpress"> </i></span>
<!-- stumbleupon-->
<span class="style amz-btn-circle col-rev-stumbleupon"> <i class="fab fa-stumbleupon"> </i></span>
<!-- yahoo-->
<span class="style amz-btn-circle col-rev-yahoo"> <i class="fab fa-yahoo"> </i></span>
<!-- blogger-->
<span class="style amz-btn-circle col-rev-blogger"> <i class="fab fa-blogger-b"> </i></span>
<!-- soundcloud-->
<span class="style amz-btn-circle col-rev-soundcloud"> <i class="fab fa-soundcloud"> </i></span>
<!-- WhatsApp-->
<span class="style amz-btn-circle col-rev-whatsapp"> <i class="fab fa-whatsapp"> </i></span>
<!-- apple-->
<span class="style amz-btn-circle col-rev-apple"> <i class="fab fa-apple"> </i></span>
<!-- Amazon-->
<span class="style amz-btn-circle col-rev-amazon"> <i class="fab fa-amazon"> </i></span>
<!-- Skype-->
<span class="style amz-btn-circle col-rev-skype"> <i class="fab fa-skype"> </i></span>
<!-- android-->
<span class="style amz-btn-circle col-rev-android"> <i class="fab fa-android"> </i></span>
<!-- 500px-->
<span class="style amz-btn-circle col-rev-500px"> <i class="fab fa-500px"> </i></span>
<!-- vine-->
<span class="style amz-btn-circle col-rev-vine"> <i class="fab fa-vine"> </i></span>
<!-- messenger-->
<span class="style amz-btn-circle col-rev-messenger"> <i class="fab fa-facebook-messenger"> </i></span>
<!-- telegram-->
<span class="style amz-btn-circle col-rev-telegram"> <i class="fab fa-telegram-plane"> </i></span>
<!-- github-->
<span class="style amz-btn-circle col-rev-github"> <i class="fab fa-github"> </i></span>
<!-- snapchat-->
<span class="style amz-btn-circle col-rev-snapchat"> <i class="fab fa-snapchat-ghost"> </i></span>
</div>
<h3 style="text-align:center">Click the button once</h3>
<div class="social-icons">
<!-- facebook-->
<span class="style amz-btn-round col-rev-facebook"> <i class="fab fa-facebook-f"></i> </span>
<!-- twitter-->
<span class="style amz-btn-round col-rev-twitter"> <i class="fab fa-twitter"></i> </span>
<!-- googleplus-->
<span class="style amz-btn-round col-rev-googleplus"> <i class="fab fa-google-plus-g"></i> </span>
<!-- youtube-->
<span class="style amz-btn-round col-rev-youtube"> <i class="fab fa-youtube"> </i></span>
<!-- rss-->
<span class="style amz-btn-round col-rev-rss"> <i class="fab fas fa-rss"> </i></span>
<!-- pinterest-->
<span class="style amz-btn-round col-rev-pinterest"> <i class="fab fa-pinterest-p"> </i></span>
<!-- youtube-->
<span class="style amz-btn-round col-rev-linkedin"> <i class="fab fa-linkedin-in"> </i></span>
<!-- vimeo-->
<span class="style amz-btn-round col-rev-vimeo"> <i class="fab fa-vimeo-v"> </i></span>
<!-- tumblr-->
<span class="style amz-btn-round col-rev-tumblr"> <i class="fab fa-tumblr"> </i></span>
<!-- instagram-->
<span class="style amz-btn-round col-rev-instagram"> <i class="fab fa-instagram"> </i></span>
<!-- flickr-->
<span class="style amz-btn-round col-rev-flickr"> <i class="fab fa-flickr"> </i></span>
<!-- dribbble-->
<span class="style amz-btn-round col-rev-dribbble"> <i class="fab fa-dribbble"> </i></span>
<!-- quora-->
<span class="style amz-btn-round col-rev-quora"> <i class="fab fa-quora"> </i></span>
<!-- foursquare-->
<span class="style amz-btn-round col-rev-foursquare"> <i class="fab fa-foursquare"> </i></span>
<!-- vk-->
<span class="style amz-btn-round col-rev-vk"> <i class="fab fa-vk"> </i></span>
<!-- wordpress-->
<span class="style amz-btn-round col-rev-wordpress"> <i class="fab fa-wordpress"> </i></span>
<!-- stumbleupon-->
<span class="style amz-btn-round col-rev-stumbleupon"> <i class="fab fa-stumbleupon"> </i></span>
<!-- yahoo-->
<span class="style amz-btn-round col-rev-yahoo"> <i class="fab fa-yahoo"> </i></span>
<!-- blogger-->
<span class="style amz-btn-round col-rev-blogger"> <i class="fab fa-blogger-b"> </i></span>
<!-- soundcloud-->
<span class="style amz-btn-round col-rev-soundcloud"> <i class="fab fa-soundcloud"> </i></span>
<!-- WhatsApp-->
<span class="style amz-btn-round col-rev-whatsapp"> <i class="fab fa-whatsapp"> </i></span>
<!-- apple-->
<span class="style amz-btn-round col-rev-apple"> <i class="fab fa-apple"> </i></span>
<!-- Amazon-->
<span class="style amz-btn-round col-rev-amazon"> <i class="fab fa-amazon"> </i></span>
<!-- Skype-->
<span class="style amz-btn-round col-rev-skype"> <i class="fab fa-skype"> </i></span>
<!-- android-->
<span class="style amz-btn-round col-rev-android"> <i class="fab fa-android"> </i></span>
<!-- 500px-->
<span class="style amz-btn-round col-rev-500px"> <i class="fab fa-500px"> </i></span>
<!-- vine-->
<span class="style amz-btn-round col-rev-vine"> <i class="fab fa-vine"> </i></span>
<!-- messenger-->
<span class="style amz-btn-round col-rev-messenger"> <i class="fab fa-facebook-messenger"> </i></span>
<!-- telegram-->
<span class="style amz-btn-round col-rev-telegram"> <i class="fab fa-telegram-plane"> </i></span>
<!-- github-->
<span class="style amz-btn-round col-rev-github"> <i class="fab fa-github"> </i></span>
<!-- snapchat-->
<span class="style amz-btn-round col-rev-snapchat"> <i class="fab fa-snapchat-ghost"> </i></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment