<div class="social-share-buttons">
<a href="#" class="social-btn facebook">Facebook</a>
<a href="#" class="social-btn twitter">Twitter</a>
<a href="#" class="social-btn linkedin">LinkedIn</a>
<a href="#" class="social-btn pinterest">Pinterest</a>
</div>
.social-share-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.social-btn {
padding: 10px 20px;
border-radius: 5px;
color: white;
text-decoration: none;
font-weight: bold;
transition: transform 0.3s;
}
.social-btn:hover {
transform: scale(1.1);
}
.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.linkedin { background-color: #0077b5; }
.pinterest { background-color: #bd081c; }
document.addEventListener('DOMContentLoaded', () => {
const socialButtons = document.querySelectorAll('.social-btn');
socialButtons.forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
const url = window.location.href;
const text = document.title;
const shareUrl = button.href;
window.open(shareUrl + '?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text), '_blank');
});
});
});