Social Share

Developer
Joseph Victory
Size
3,126 Kb
Views
30,360
  1. Social Share Previews
  2. Social Share HTML Codes
  3. Social Share CSS Codes
  4. Social Share JS Codes

How do I make an social share?

A social share widget built with HTML. CSS and jQuery. What is a social share? How do you make a social share? This script and codes were developed by Joseph Victory on 20 August 2022, Saturday.

Social Share Previews
IQ Test

Social Share - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Share</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Inspired by this cute dribble: https://dribbble.com/shots/2329804-Social-share -->
<div class="share"> <p class="noSelect">Share</p> <ul class="sites"> <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhUlEQVQ4T2NkwA0EGBgY+hkYGBKQlBxkYGBwQNbCiMeAAwwMDPZo8iQZ8B9J80cGBoYLUFxArAuQDQhkYGDYgM21+LyAbIAjAwMDyEsYAJsBExgYGPTRAgvk/A8MDAwXGRgYCHoBW+DBbJ5IqQGNDAwMDeQEIklhALOA7EAcNQARR/QJRAC3ICQR7/KDmQAAAABJRU5ErkJggg==" />Facebook</li> <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7klEQVQ4T6WTa3ECMRRGzyooDsABOAAUlCoAFIADcAASqANQAKugrQMkIIE5O8lOZiEzgd4/u0m+nPtMxT+tKrw/AMZADzgB13CvJ8DNHbDMwEbAOeiiZA9MgC8B/ig4ZCB66z+BH4FagB5+gkDxFvgO6/Ssy1CziDX4BYaJ4ga4J3CRSW0KXGIEG2BWWNAoawEWUU8fLwKa6GMKereIpRBb2USczoGtWRVG0YT/LqD13gW4dibWwGcmkr+gsUuNpSnY83lom4XtWh3ybi9HgF7NP52D9LJePbfID5ZG4IMR5ldzkOIwZWtb+hqzgDtOAiixzlXl+gAAAABJRU5ErkJggg==" />Twitter</li> <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T82T3REBMRRGz1agBR3QAR2gAx1Qiu1AB+iADlYHWlABc0hmMtnNg/Dge8pk7vdzb24aoAMm1KFrgEcd9836VMD6iJfxfwucgH3IuwYWQ7MqtSB5mRHOwCwXSQU8x6IVcMyKFTwAF2AeX+/nAjtgE9xNkSKma4FtKcE4bOYoiMQhSjD2HZgCt5KAjhbavyIpJDsHk4jeIqVbZhJddRP+F9vTubiJqcDQk+d3VavcE9b1m+98fQJCrDaij99/+wAAAABJRU5ErkJggg==" />Instagram</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Social Share - Script Codes CSS Codes

body { background: #FEF6EA; font-family: 'Roboto', sans-serif;
}
.share { text-transform: uppercase; width: 180px; height: 40px; background: white; border-radius: 15px; box-shadow: 0px 13px 92px -16px #000000; font-weight: bold; font-size: 20px; letter-spacing: 3px; line-height: 40px; text-align: center; color: #676767; margin: 0 auto; margin-top: 7%; z-index: 9999; position: relative; cursor:pointer;
}
.share p { margin: 0px; padding: 0px;
}
.sites { display: none; font-size: 10px; list-style-type: none; background: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: -1; position: relative; margin-top: -25px; padding-top: 20px; box-shadow: 6px 29px 100px -46px #000000; padding-left: 0px;
}
.share p:after { content: '+'; margin-left: 10px;
}
.share p.open:after { content: '-';
}
.sites li:hover { color: black;
}
.sites li img { position: relative; top: 4px; left: -10px;
}
.noSelect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.shake{ -webkit-transform: translateY(10%); transform: translateY(10%); -webkit-transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15); transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15), -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
}

Social Share - Script Codes JS Codes

$('.share p').on('click', function() { $('.sites').slideToggle('fast', function() {}); $('.share p').toggleClass('open'); $('.share p:after').css('content', '-'); $('.sites').toggleClass('shake');
});
Social Share - Script Codes
Social Share - Script Codes
Home Page Home
Developer Joseph Victory
Username j-w-v
Uploaded August 20, 2022
Rating 3.5
Size 3,126 Kb
Views 30,360
Do you need developer help for Social Share?

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!

Joseph Victory (j-w-v) Script Codes
Name
Responsive Blog Homepage
Portfolio Opening Page
Fading Navigation Bar
Login Process
Pricing Tables
CSS Puns
IPad Pro lock screen
To Do List using firebase
Pricing Tables
Loading Animation
Create amazing Facebook ads 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!