Description:
The Social Media Share Button Generator is a versatile web tool crafted using HTML, CSS, and JavaScript. This tool empowers users to effortlessly create customized social media share buttons by selecting their preferred social media icon and button style. The generated buttons can be previewed instantly, allowing users to tailor the appearance of share buttons to match their website or application. With its user-friendly interface, this generator simplifies the process of integrating stylish and personalized share buttons, enhancing the social sharing experience for users
Social Media Share Button Generator tool with customizable icons and styles in HTML, CSS, and JavaScript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Share Button Generator</title> <style> body { font-family: 'Arial', sans-serif; text-align: center; margin: 50px; } #buttonForm { max-width: 600px; margin: 0 auto; } #buttonPreview { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; min-height: 100px; background-color: #f8f8f8; text-align: left; } .socialButton { display: inline-block; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } </style> </head> <body> <h1>Social Media Share Button Generator</h1> <form id="buttonForm"> <label for="socialIcon">Select Social Media Icon:</label> <select id="socialIcon"> <option value="facebook">Facebook</option> <option value="twitter">Twitter</option> <option value="instagram">Instagram</option> <option value="linkedin">LinkedIn</option> <!-- Add more social media options as needed --> </select> <label for="buttonStyle">Select Button Style:</label> <select id="buttonStyle"> <option value="square">Square</option> <option value="rounded">Rounded</option> <option value="circle">Circle</option> </select> <button type="button" onclick="generateButton()">Generate Share Button</button> </form> <div id="buttonPreview"></div> <script> function generateButton() { const socialIconSelect = document.getElementById('socialIcon'); const buttonStyleSelect = document.getElementById('buttonStyle'); const buttonPreview = document.getElementById('buttonPreview'); const selectedIcon = socialIconSelect.value; const selectedStyle = buttonStyleSelect.value; const buttonHTML = `<a class="socialButton ${selectedStyle}" href="#" onclick="shareOn('${selectedIcon}')"> <img src="${getIconUrl(selectedIcon)}" alt="${selectedIcon} icon"> </a>`; buttonPreview.innerHTML = buttonHTML; } function shareOn(socialMedia) { // Add your share logic here alert(`Sharing on ${socialMedia}!`); } function getIconUrl(iconName) { // Replace with actual URLs for social media icons const iconUrls = { 'facebook': 'url_to_facebook_icon.png', 'twitter': 'url_to_twitter_icon.png', 'instagram': 'url_to_instagram_icon.png', 'linkedin': 'url_to_linkedin_icon.png', }; return iconUrls[iconName] || ''; } </script> </body> </html>
No comments:
Post a Comment