Various Share Button Styles

Developer

Size

5,263 Kb

Views

36,432

Various Share Button Styles Previews
Various Share Button Styles HTML Codes
Various Share Button Styles CSS Codes

How do I make an various share button styles?

10 different share button styles with social icons to be stolen or used for inspiration!. What is a various share button styles? How do you make a various share button styles? This script and codes were developed by Mark Murray on 12 August 2022, Friday.

Various Share Button Styles Previews

Various Share Button Styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Various Share Button Styles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div> <div class='row'><i class='entypo-facebook'></i><i class='entypo-twitter'></i><i class='entypo-gplus'></i><i class='entypo-pinterest'></i><i class='entypo-dribbble'></i></div>
</div>
</body>
</html>

Various Share Button Styles - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class^="entypo-"]:before,
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
*, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { background: #eff0f1;
}
.container { width: 25em; margin: 0 auto 3em auto; text-align: center; overflow: hidden;
}
.row { margin: 0.5em 0; float: left; clear: both;
}
.row i { cursor: pointer; display: inline-block; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
.row:first-child { background: #f8f8f8; padding: 0.5em 0; border-radius: 8px; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.row:first-child i { border-right: 1px solid #e8e8e8; border-left: 1px solid #fff; padding: 0.5em 1em; margin: 0; text-shadow: 1px 1px 0 white;
}
.row:first-child i:hover { color: #34495e !important;
}
.row:first-child i:nth-child(1) { color: #3b5998; border-left: none;
}
.row:first-child i:nth-child(2) { color: #00a0d1;
}
.row:first-child i:nth-child(3) { color: #db4a39;
}
.row:first-child i:nth-child(4) { color: #c8232c;
}
.row:first-child i:nth-child(5) { color: #ea4c89; border-right: none;
}
.row:nth-child(4) { background: transparent;
}
.row:nth-child(4) i { color: #34495e; border-radius: 50%; padding: 1em; position: relative; background: white; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.row:nth-child(4) i:hover { top: -3px;
}
.row:nth-child(4) i:not(:first-child) { margin-left: 1em;
}
.row:nth-child(5) { background: transparent;
}
.row:nth-child(5) i { color: #34495e; border: 2px solid #34495e; border-radius: 50%; padding: 1em; position: relative; background: transparent;
}
.row:nth-child(5) i:hover { background: #34495e; color: white; top: -2px;
}
.row:nth-child(5) i:not(:first-child) { margin-left: 1em;
}
.row:nth-child(2) { background: transparent;
}
.row:nth-child(2) i { color: white; padding: 1em; position: relative; background: transparent;
}
.row:nth-child(2) i:hover { top: -2px;
}
.row:nth-child(2) i:nth-child(1) { background: #3b5998; border-left: none;
}
.row:nth-child(2) i:nth-child(2) { background: #00a0d1;
}
.row:nth-child(2) i:nth-child(3) { background: #db4a39;
}
.row:nth-child(2) i:nth-child(4) { background: #c8232c;
}
.row:nth-child(2) i:nth-child(5) { background: #ea4c89; border-right: none;
}
.row:nth-child(6) { background: transparent;
}
.row:nth-child(6) i { color: white; padding: 1em; position: relative; background: transparent;
}
.row:nth-child(6) i:hover { border-radius: 50%;
}
.row:nth-child(6) i:not(:first-child) { margin-left: 1em;
}
.row:nth-child(6) i:nth-child(1) { color: #3b5998; border: 2px solid #3b5998;
}
.row:nth-child(6) i:nth-child(1):hover { color: white; background: #3b5998;
}
.row:nth-child(6) i:nth-child(2) { color: #00a0d1; border: 2px solid #00a0d1;
}
.row:nth-child(6) i:nth-child(2):hover { color: white; background: #00a0d1;
}
.row:nth-child(6) i:nth-child(3) { color: #db4a39; border: 2px solid #db4a39;
}
.row:nth-child(6) i:nth-child(3):hover { color: white; background: #db4a39;
}
.row:nth-child(6) i:nth-child(4) { color: #c8232c; border: 2px solid #c8232c;
}
.row:nth-child(6) i:nth-child(4):hover { color: white; background: #c8232c;
}
.row:nth-child(6) i:nth-child(5) { color: #ea4c89; border: 2px solid #ea4c89;
}
.row:nth-child(6) i:nth-child(5):hover { color: white; background: #ea4c89;
}
.row:nth-child(3) { background: transparent;
}
.row:nth-child(3) i { color: white; padding: 1em; position: relative; background: transparent;
}
.row:nth-child(3) i:nth-child(1) { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNiNTk5OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJkNDM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b5998), color-stop(100%, #2d4373)); background-image: -moz-linear-gradient(top, #3b5998, #2d4373); background-image: -webkit-linear-gradient(top, #3b5998, #2d4373); background-image: linear-gradient(to bottom, #3b5998, #2d4373); border-radius: 8px 0 0 8px;
}
.row:nth-child(3) i:nth-child(2) { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYTBkMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzk5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00a0d1), color-stop(100%, #00799e)); background-image: -moz-linear-gradient(top, #00a0d1, #00799e); background-image: -webkit-linear-gradient(top, #00a0d1, #00799e); background-image: linear-gradient(to bottom, #00a0d1, #00799e);
}
.row:nth-child(3) i:nth-child(3) { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiNGEzOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JlMzMyMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #db4a39), color-stop(100%, #be3323)); background-image: -moz-linear-gradient(top, #db4a39, #be3323); background-image: -webkit-linear-gradient(top, #db4a39, #be3323); background-image: linear-gradient(to bottom, #db4a39, #be3323);
}
.row:nth-child(3) i:nth-child(4) { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4MjMyYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzlkMWIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8232c), color-stop(100%, #9d1b22)); background-image: -moz-linear-gradient(top, #c8232c, #9d1b22); background-image: -webkit-linear-gradient(top, #c8232c, #9d1b22); background-image: linear-gradient(to bottom, #c8232c, #9d1b22);
}
.row:nth-child(3) i:nth-child(5) { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhNGM4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1MWU2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ea4c89), color-stop(100%, #e51e6b)); background-image: -moz-linear-gradient(top, #ea4c89, #e51e6b); background-image: -webkit-linear-gradient(top, #ea4c89, #e51e6b); background-image: linear-gradient(to bottom, #ea4c89, #e51e6b); border-radius: 0 8px 8px 0;
}
.row:nth-child(7) { background: #fefefe; -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.row:nth-child(7) i { border-right: 1px solid #e8e8e8; padding: 1em; margin: 0; text-shadow: 1px 1px 0 white; color: #3a3a3a;
}
.row:nth-child(7) i:hover { -moz-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12); -webkit-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.12);
}
.row:nth-child(7) i:nth-child(1) { border-left: none;
}
.row:nth-child(7) i:nth-child(5) { border-right: none;
}
.row:nth-child(7) i:nth-child(1):hover { color: #3b5998;
}
.row:nth-child(7) i:nth-child(2):hover { color: #00a0d1;
}
.row:nth-child(7) i:nth-child(3):hover { color: #db4a39;
}
.row:nth-child(7) i:nth-child(4):hover { color: #c8232c;
}
.row:nth-child(7) i:nth-child(5):hover { color: #ea4c89;
}
.row:nth-child(8) i { padding: 1em; margin: 0; color: white; border-bottom: 5px solid #8e8e8e;
}
.row:nth-child(8) i:hover { border-bottom: 5px solid #939393;
}
.row:nth-child(8) i:nth-child(2n) { background: #aaa;
}
.row:nth-child(8) i:nth-child(2n + 1) { background: #8e8e8e;
}
.row:nth-child(8) i:nth-child(1) { border-left: none;
}
.row:nth-child(8) i:nth-child(5) { border-right: none;
}
.row:nth-child(8) i:nth-child(1):hover { background: #3b5998; border-bottom: 5px solid #4c70ba;
}
.row:nth-child(8) i:nth-child(2):hover { background: #00a0d1; border-bottom: 5px solid #05c4ff;
}
.row:nth-child(8) i:nth-child(3):hover { background: #db4a39; border-bottom: 5px solid #e37164;
}
.row:nth-child(8) i:nth-child(4):hover { background: #c8232c; border-bottom: 5px solid #de4049;
}
.row:nth-child(8) i:nth-child(5):hover { background: #ea4c89; border-bottom: 5px solid #ef7aa7;
}
.row:nth-child(9) { background: transparent;
}
.row:nth-child(9) i { color: #34495e; border: 2px solid transparent; border-radius: 0%; padding: 1em; position: relative; background: transparent;
}
.row:nth-child(9) i:hover { top: -2px; border-radius: 50%;
}
.row:nth-child(9) i:not(:first-child) { margin-left: 1em;
}
.row:nth-child(9) i:nth-child(1) { color: #3b5998; border-bottom-color: #3b5998;
}
.row:nth-child(9) i:nth-child(2) { color: #00a0d1; border-bottom-color: #00a0d1;
}
.row:nth-child(9) i:nth-child(3) { color: #db4a39; border-bottom-color: #db4a39;
}
.row:nth-child(9) i:nth-child(4) { color: #c8232c; border-bottom-color: #c8232c;
}
.row:nth-child(9) i:nth-child(5) { color: #ea4c89; border-bottom-color: #ea4c89;
}
.row:nth-child(10) { background: transparent; margin-top: 2em !important;
}
.row:nth-child(10) i { color: #34495e; border: 2px solid; border-radius: 50%; padding: 0.5em; position: relative; background: transparent;
}
.row:nth-child(10) i:hover { top: -2px; border-radius: 50%; color: white !important;
}
.row:nth-child(10) i:not(:first-child) { margin-left: 1em;
}
.row:nth-child(10) i:nth-child(1) { color: #3b5998; border-color: #3b5998;
}
.row:nth-child(10) i:nth-child(2) { color: #00a0d1; border-color: #00a0d1;
}
.row:nth-child(10) i:nth-child(3) { color: #db4a39; border-color: #db4a39;
}
.row:nth-child(10) i:nth-child(4) { color: #c8232c; border-color: #c8232c;
}
.row:nth-child(10) i:nth-child(5) { color: #ea4c89; border-color: #ea4c89;
}
.row:nth-child(10) i:nth-child(1):hover { background: #3b5998;
}
.row:nth-child(10) i:nth-child(2):hover { background: #00a0d1;
}
.row:nth-child(10) i:nth-child(3):hover { background: #db4a39;
}
.row:nth-child(10) i:nth-child(4):hover { background: #c8232c;
}
.row:nth-child(10) i:nth-child(5):hover { background: #ea4c89;
}
.row:nth-child(11) i:nth-child(1) { color: #3b5998; border-color: #3b5998;
}
.row:nth-child(11) i:nth-child(2) { color: #00a0d1; border-color: #00a0d1;
}
.row:nth-child(11) i:nth-child(3) { color: #db4a39; border-color: #db4a39;
}
.row:nth-child(11) i:nth-child(4) { color: #c8232c; border-color: #c8232c;
}
.row:nth-child(11) i:nth-child(5) { color: #ea4c89; border-color: #ea4c89;
}

Home Page	Home
Developer	Mark Murray
Username	markmurray
Uploaded	August 12, 2022
Rating	4.5
Size	5,263 Kb
Views	36,432

Do you need developer help for Various Share Button Styles?

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!

Mark Murray (markmurray) Script Codes

Name	Size
Flat Social Icons	15,106 Kb
Flex Projects	4,266 Kb
Train Line	2,857 Kb
Some HR Styles	3,384 Kb
Really Simple Slider	3,900 Kb
Flex Blog Entries	6,690 Kb
Blog Posts Sidebar	5,494 Kb
Simple Fade Slider	2,709 Kb
Services	2,401 Kb
Full Screen Sections with Keypress Scroll	3,162 Kb

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!

Similar Scripts & Codes

Name	Username	Size
About Us	Francescaedits	1,902 Kb
A form arranged using automatic placement.	Vikasford	2,103 Kb
Automatic scroll	Skeurentjes	4,042 Kb
LDE old privacy page	Jasonangle	2,339 Kb
Scroll Arrow	Robooneus	4,437 Kb
Myprofile	SoufianeAbid	2,451 Kb
Motion Lines - codevember - 02 - 2016	Caiocares	2,744 Kb
Click Based Rotation Demo	Zeaklous	2,086 Kb
Content Changer	Cliffpyles	4,538 Kb
Lightning	Akm2	19,150 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!