Botones Redes Sociales HTML

¿Necesitas insertar botones de redes sociales en formato HTML en tu sitio web? En este artículo podrán ver el código escrito que sirve para crear botones para compartir en redes sociales.

Básicamente, estos botones sociales han sido diseñados con código CSS y Font Awesome para mostrar iconos sociales en un sitio web. Pueden integrarse en cualquier página web, para vincular los perfiles de las Redes Sociales. Solo es necesario agregar los enlaces de los perfiles sociales, en el atributo href del hipervínculo.

Botones para compartir en Redes Sociales

Cómo crear botones HTML para redes sociales

Estos botones HTML que se crearán, usan Font Awesome 5 CSS para los iconos. Por lo tanto, cargue el CSS de Font Awesome agregando el siguiente enlace CDN en la etiqueta principal de su páginas HTML.

<!-- Font Awesome 5.15.1 CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>

A continuación cree la estructura HTML para los botones de la siguiente forma:

<div class="wrapper"> class="wrapper">
  <a href="#" class="icon facebook"><a href="#" class="icon facebook">
    <div class="tooltip">Facebook</div><div class="tooltip">Facebook</div>
    <span><i class="fab fa-facebook-f"></i></span><span><i class="fab fa-facebook-f"></i></span>
  </a></a>
  <a href="#" class="icon twitter"><a href="#" class="icon twitter">
    <div class="tooltip">Twitter</div><div class="tooltip">Twitter</div>
    <span><i class="fab fa-twitter"></i></span><span><i class="fab fa-twitter"></i></span>
  </a></a>
  <a href="#" class="icon instagram"><a href="#" class="icon instagram">
    <div class="tooltip">Instagram</div><div class="tooltip">Instagram</div>
    <span><i class="fab fa-instagram"></i></span><span><i class="fab fa-instagram"></i></span>
  </a></a>
  <a href="#" class="icon github"><a href="#" class="icon github">
    <div class="tooltip">Github</div><div class="tooltip">Github</div>
    <span><i class="fab fa-github"></i></span><span><i class="fab fa-github"></i></span>
  </a></a>
  <a href="#" class="icon youtube"><a href="#" class="icon youtube">
    <div class="tooltip">Youtube</div><div class="tooltip">Youtube</div>
    <span><i class="fab fa-youtube"></i></span><span><i class="fab fa-youtube"></i></span>
  </a></a>
</div></div>

Finalmente, hay que diseñar los botones HTML usando el siguiente CSS y listo. Se podrá establecer los valores personalizados de tamaño, color y margen para los iconos sociales según sus necesidades.

Ver código CSS

¡Eso es todo! Con suerte, habrán integrado con éxito el código de estos botones HTML. Si tiene alguna pregunta o sugerencia, pueden hacerlo mediante un comentario a continuación.

Demostración online

Descargar