Social Sharing Buttons

Developer
Eduard Mayer
Size
2,711 Kb
Views
34,408
  1. Social Sharing Buttons Previews
  2. Social Sharing Buttons HTML Codes
  3. Social Sharing Buttons CSS Codes
  4. Social Sharing Buttons JS Codes

How do I make an social sharing buttons?

Just some share buttons i made for my upcoming blog.Open this preview in any webkit browser :) (It should be working Firefox too.). What is a social sharing buttons? How do you make a social sharing buttons? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

Social Sharing Buttons Previews
IQ Test

Social Sharing Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Sharing Buttons</title> <meta charset="UTF-8">	<title>Social Sharer</title>	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>	<section class="pen">	<img src="https://dl.dropbox.com/s/njz7w9o0v01pdpe/arrows.png" alt="Click here"></img>	</section>	<section class="pen">	<div class="more-button">	<div class="container">	<a href="#" class="share-btn icon-twitter"></a>	<a href="#" class="share-btn icon-facebook"></a>	<a href="#" class="share-btn icon-google-plus-sign"></a>	<a href="#" class="share-btn icon-pinterest"></a>	<a href="#" class="share-btn icon-linkedin"></a>	<a href="#" class="share-btn icon-github-alt"></a>	</div>	</div>	</section>	<section class="credit">	<p>Code by <a href="http://twitter.com/vsxed" target="_blank" class="credit-link">Eduard</a></p>	<a href="https://github.com/vsxed/Social-Sharer" target="_blank" class="credit-link button">Fork it on Github</a>	</section>
</body> <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 Sharing Buttons - Script Codes CSS Codes

@import url(http://www.eduardmayer.de/codepen-css-resources/webfonts.css);
body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; font-size: 1em; line-height: 1; background: #333333;
}
.pen { max-width: 290px; margin: 0 auto;
}
.pen img { margin-left: 15px;
}
.credit { display: block; max-width: 400px; text-align: center; margin: 75px auto 0; padding: 0; font-size: 0.8em; color: #f0f0f0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a { color: white; text-decoration: none; font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); color: white;
}
.credit p a.button,
.credit a.button { padding: 6px 12px; margin-top: 10px; background: #1a1a1a; border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover { background: #4d4d4d;
}
.credit p:last-of-type { margin-bottom: 30px;
}
.more-button { display: inline-block; padding: 5px 15px 5px 0; margin-left: 15px; overflow: hidden; top: 5px; width: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative;
}
.more-button:before { content: '\e0f2'; font-family: "more"; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; width: 20px; background: #333333; cursor: pointer; color: #cccccc; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.more-button:hover:before,
.more-button:active:before { color: #595959; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.more-button:hover,
.more-button:active { width: 250px;
}
.container { display: inline-block; opacity: 0; overflow: hidden; top: 0; left: 0; width: 250px; position: absolute; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.container .share-btn { font-size: 1.2em; padding: 10px; color: #b0b0b0;
}
.container .share-btn:hover,
.container .share-btn:active { text-shadow: 0 0 5px rgba(85, 190, 235, 0.45); color: #55beeb;
}
.more-button:hover > .container,
.more-button:active > .container { display: inline-block; left: 35px; position: absolute; opacity: 1; width: 250px; top: 0; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}

Social Sharing Buttons - Script Codes JS Codes

//no-js
Social Sharing Buttons - Script Codes
Social Sharing Buttons - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 4.5
Size 2,711 Kb
Views 34,408
Do you need developer help for Social Sharing 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!

Eduard Mayer (codewunder) Script Codes
Name
Responsive GTA V Slider
CSSOff 2013 Submission
A Pen by Eduard Mayer
Twitter Widget Rebound
Enlarge text with buttons and js, with limited max- and min sizes
Infotype SVG Animation
Scrollable see-through headline
A Pen by Eduard Mayer
Animated Ubuntu Touch-styled checkboxes
Whatsapp PTT Animation
Create amazing blog posts 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!