To make your website more beautiful, you can use effects in different sections. One of these sections are social buttons. In this code, the buttons have disappeared with the Blar filter. By placing the mouse cursor on each of the buttons, that button becomes clear and colored. The phrase "follow me" also appears next to the button.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<div class="redes_sociales">
<ul>
<li><a href=""><i class="fab fa-facebook-square"></i>
</a><span id="nom_red">Follow Me!</span>
</li>
<li><a href="#" target="_blank"><i class="fab fa-instagram-square"></i></a>
</li><li><a href="#" target="_blank"><i class="fab fa-youtube-square"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
</ul>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
font-family: system-ui;
color: black;
text-align: center;
}
.redes_sociales{
height: 50vh;
justify-content: center;
display: flex;
align-items: center;
}
.redes_sociales ul li{
font-size: 80px;
display: inline-block;
margin: 0px 15px;
text-align: center;
}
.redes_sociales ul li a{
display: block;
padding: 0 10px;
color: black;
box-shadow: 0px 3px 10px 0px;
transition: .2s;
filter: blur(3px);
}
.redes_sociales ul li a:hover {
transform: translateY(-3px) scale(1.50);
color: rgba(0, 0, 0, .8);
filter: blur(0px);
}
.fa-facebook-square:hover {
color:blue;
}
.fa-instagram-square:hover {
color: #dd36ba;
}
.fa-youtube-square:hover {
color:red;
}
.fa-twitter-square:hover {
color: #49cae4;
}
.redes_sociales span {
display:none;
}
.redes_sociales:hover span {
display:block;
position:fixed;
overflow:hidden;
}Javascript
var tooltips = document.querySelectorAll('.redes_sociales span');
window.onmousemove = function (e) {
var x = (e.clientX + 20) + 'px',
y = (e.clientY + 20) + 'px';
for (var i = 0; i < tooltips.length; i++) {
tooltips[i].style.top = y;
tooltips[i].style.left = x;
}
};
