Social Icon Buttons

Developer
Chris Steurer
Size
3,362 Kb
Views
8,096
  1. Social Icon Buttons Previews
  2. Social Icon Buttons HTML Codes
  3. Social Icon Buttons CSS Codes

How do I make an social icon buttons?

Social icon buttons with smooth hover state animations.. What is a social icon buttons? How do you make a social icon buttons? This script and codes were developed by Chris Steurer on 08 December 2022, Thursday.

Social Icon Buttons Previews
IQ Test

Social Icon Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icon Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cs-social-share clearfix"> <div class="cs-share-this-product facebook"> <a title="Share on Facebook" target="_blank" href=""> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-facebook.png"> <span class="share-text">Share</span> </div> </a> </div> <div class="cs-share-this-product twitter "> <a title="Share on Twitter" target="_blank" href="#"> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-twitter.png"> <span class="share-text">Tweet</span> </div> </a> </div> <div class="cs-share-this-product google-plus "> <a title="Share on Google+" target="_blank" href="#"> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-google-plus.png"> <span class="share-text">Share</span> </div> </a> </div> <div class="cs-share-this-product pinterest "> <a title="Share on Pinterest" target="_blank" href="#"> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-pinterest.png"> <span class="share-text">Pin</span> </div> </a> </div> <div class="cs-share-this-product linkedin "> <a title="Share on LinkedIn" target="_blank" href="#"> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-linked-in.png"> <span class="share-text">Share</span> </div> </a> </div> <div class="cs-share-this-product email "> <a title="Share via Email" href="#"> <div class="social-share-icon-block"> <img src="https://theofficeplace.com/wp-content/uploads/share-icons/share-email.png"> <span class="share-text">Email</span> </div> <div class="count"></div> </a> </div> <div class="clearfix"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Social Icon Buttons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body { font-family: Noto Sans; background: #272727;
}
.clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0;
}
/*///////////////////////////////////////////////////////////// // Social Sharing Icons \
///////////////////////////////////////////////////////////// */
.cs-social-share { box-sizing: border-box; width: 100%; max-width: 600px; margin: 30vh auto; display: block; background: #424242; border: solid 3px #2F2F2F; padding: 2%;
}
/*///////////////////////////////////////////////////////////// // Social Sharing Icons On Product Page \
///////////////////////////////////////////////////////////// */
.cs-share-this-product { float: left; width: 15%; height: 30px; padding: 1px 0px; min-width: 68px; margin: 2% .8%; overflow: hidden; -webkit-filter: brightness(90%); -moz-filter: brightness(90%); -ms-filter: brightness(90%); -o-filter: brightness(90%); filter: brightness(90%); transition: all .45s ease-in-out;
}
.cs-share-this-product:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); border-radius: 3px; -webkit-filter: brightness(120%); -moz-filter: brightness(120%); -ms-filter: brightness(120%); -o-filter: brightness(120%); filter: brightness(120%);
}
.cs-share-this-product:hover img { left: 32%; transform: scale(1);
}
.cs-share-this-product:hover span.share-text { opacity: 0; left: 20px; transform: rotateX(90deg) scale(0.3);
}
.cs-share-this-product a { text-decoration: none;
}
.cs-share-this-product img { width: 28px; transition: all .5s ease; position: relative; left: 0; transform: scale(0.8);
}
.cs-share-this-product .social-share-icon-block span.share-text { font-size: 12px; color: #fff; position: relative; left: -3px; top: -8px; transition: all .45s ease-in-out;
}
.cs-share-this-product.facebook { background: #527EBF;
}
.cs-share-this-product.twitter { background: #25C0E2;
}
.cs-share-this-product.google-plus { background: #DB4A37;
}
.cs-share-this-product.pinterest { background: #CD2129;
}
.cs-share-this-product.linkedin { background: #147BB7;
}
.cs-share-this-product.email { background: #0F75BC;
}
Social Icon Buttons - Script Codes
Social Icon Buttons - Script Codes
Home Page Home
Developer Chris Steurer
Username stoypenny
Uploaded December 08, 2022
Rating 4.5
Size 3,362 Kb
Views 8,096
Do you need developer help for Social Icon Buttons?

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!

Chris Steurer (stoypenny) Script Codes
Name
Responsive Menu
Responsive Coupon Code Containers
A Pen by Chris Steurer
Side Scroll Image Gallery
Realistic Buttons
Product Hover Display Cards
WooCommerce Price Updater
Analytics Data
Remove Empty WooCommerce Filters
Stylish Credit Card Form
Create amazing video scripts 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!