Share button for images
How do I make an share button for images?
Share button with animation for images. Inspired by Dribbble: http://dribbble.com/shots/1094659-Multi-share. What is a share button for images? How do you make a share button for images? This script and codes were developed by Jaflo on 12 September 2022, Monday.
Share button for images - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Share button for images</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { overflow: hidden;
}
#img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: white url(http://i43.tinypic.com/bgodci.png); background: white url(http://i44.tinypic.com/2zioq9z.jpg); background: white url(http://i43.tinypic.com/33p6ds9.jpg); background-position: center; background-size: cover; z-index: -1;
}
#share { background: white; position: absolute; bottom: 10px; right: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5); border-radius: 3px; font-size: 16px; font-family: Tahoma, Verdana, Segoe, sans-serif; overflow: hidden; padding: 0;
}
#share > strong { display: inline-block; padding: 4px; width: 50px; text-align: center;
}
#share > div { color: white; display: inline-block; width: 0; padding: 4px 0; text-align: center; transition: width 0.3s, padding 0.3s; cursor: pointer; height: 20px; overflow: hidden; margin: -8px 0;
}
#share:hover > div { width: 20px; padding: 4px;
}
#share > div.f { background: #4162a5;
}
#share > div.t { background: #6ba7dd;
}
#share > div.g { background: #d63737; font-family: Georgia, Times, 'Times New Roman', serif;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="img"></div>
<div id="share"> <strong>Share</strong><!-- --><div class="f">f</div><!-- --><div class="t">t</div><!-- --><div class="g">g</div>
</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>
Share button for images - Script Codes CSS Codes
body { overflow: hidden;
}
#img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: white url(http://i43.tinypic.com/bgodci.png); background: white url(http://i44.tinypic.com/2zioq9z.jpg); background: white url(http://i43.tinypic.com/33p6ds9.jpg); background-position: center; background-size: cover; z-index: -1;
}
#share { background: white; position: absolute; bottom: 10px; right: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5); border-radius: 3px; font-size: 16px; font-family: Tahoma, Verdana, Segoe, sans-serif; overflow: hidden; padding: 0;
}
#share > strong { display: inline-block; padding: 4px; width: 50px; text-align: center;
}
#share > div { color: white; display: inline-block; width: 0; padding: 4px 0; text-align: center; transition: width 0.3s, padding 0.3s; cursor: pointer; height: 20px; overflow: hidden; margin: -8px 0;
}
#share:hover > div { width: 20px; padding: 4px;
}
#share > div.f { background: #4162a5;
}
#share > div.t { background: #6ba7dd;
}
#share > div.g { background: #d63737; font-family: Georgia, Times, 'Times New Roman', serif;
}
Share button for images - Script Codes JS Codes
// Inspired by Dribbble: http://dribbble.com/shots/1094659-Multi-share
Developer | Jaflo |
Username | jaflo |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 2,715 Kb |
Views | 26,312 |
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!
Name | Size |
Nice flat icon | 2,956 Kb |
SimpleGroove bookmarklet | 263,204 Kb |
Styled calendar | 7,526 Kb |
Dialogue boxes | 3,897 Kb |
Wobble menu change animation | 2,443 Kb |
Scroll bar manipulation | 2,344 Kb |
A Pen by jaflo | 2,066 Kb |
D3 animation | 2,998 Kb |
Map animation | 4,533 Kb |
Resizable mail icon | 2,826 Kb |
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!
Name | Username | Size |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Speech bubbles | Something | 1,547 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
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!