Carregando...
Notícias

Botões de redes sociais html

Postado: 19 de dezembro de 2022 Tempo de Leitura: 6 Minutos

Botões de redes sociais html

Neste veja como criar Botões de redes sociais com Css e Html. pronto para usar no seu site ou blogs.

Nesta seção, projetaremos as estruturas com as tags abaixo. 

Usaremos A Tag <a> para inserirmos o LINK de destino com as class com cada nome da Rede Social com nome.

Essas tags usaremos para criar os nossos Botões de redes sociais com html e css.

Vamos Adicionar o HTML

 <div class="box-social">
                  
    <a href="#" class="facebook"> <i class="icon icon-facebook"></i> </a>
    <a href="#" class="instagram"> <i class="icon icon-instagram"></i> </a>
    <a href="#" class="twitter"> <i class="icon icon-twitter"></i></a>
    <a href="#" class="pinterest"> <i class="icon icon-pinterest"></i></a>
                
 </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso  link com efeito de onda no texto com css e html.

.box-social {

  max-width: 300;
  margin: 0 auto;
  padding: 20px 30px;
  text-align: center;
  background-color: #F0F2F5;

}

/*Botoes*/

/*Twitter*/
.twitter {

  outline: 0 none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 55px;
  padding: 0px;
  margin-right: 10px; 
  color: #ffffff;
  font-size: 1.5em;
  text-align:center;
  text-decoration: none;
  border: 0 none;
  background-color: rgba(0, 172, 238, 0.8);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 20px rgba(0, 172, 238, 0), inset 0 0 5px #009ad5, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: 0 0 0 20px rgba(0, 172, 238, 0), inset 0 0 5px #009ad5, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 20px rgba(0, 172, 238, 0), inset 0 0 5px #009ad5, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

.twitter:hover,
.twitter:focus {

  background-color: #00acee;
  -webkit-box-shadow: 0 0 0 10px rgba(34, 194, 255, 0.5), inset 0 0 0 0 #00acee, 0 0 5px 2px #003d55;
  -moz-box-shadow: 0 0 0 10px rgba(34, 194, 255, 0.5), inset 0 0 0 0 #00acee, 0 0 5px 2px #003d55;
  box-shadow: 0 0 0 10px rgba(34, 194, 255, 0.5), inset 0 0 0 0 #00acee, 0 0 5px 2px #003d55;

}

.twitter:hover,
.twitter:focus {

  text-shadow: -1px -1px #0087bb;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);

}

.twitter:active,
.twitter:checked {

  background-color: #009ad5;
  -webkit-box-shadow: 0 0 0 10px rgba(0, 154, 213, 0.5);
  -moz-box-shadow: 0 0 0 10px rgba(0, 154, 213, 0.5);
  box-shadow: 0 0 0 8.33333333px rgba(0, 154, 213, 0.5);
  -webkit-box-shadow: 0 0 0 10px rgba(0, 154, 213, 0.5), inset 0 0 0 0 #0087bb;
  -moz-box-shadow: 0 0 0 10px rgba(0, 154, 213, 0.5), inset 0 0 0 0 #0087bb;
  box-shadow: 0 0 0 10px rgba(0, 154, 213, 0.5), inset 0 0 10px #003d55;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}

.twitter:active,
.twitter:checked {

  color: rgba(255, 255, 255, 0.8);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}
/*Twitter*/

/*Facebook*/
.facebook {

  outline: 0 none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 55px;
  padding: 0px;
  margin-right: 10px; 
  color: #ffffff;
  font-size: 1.5em;
  text-align:center;
  text-decoration: none;
  border: 0 none;
  background-color: rgba(59, 89, 152, 0.8);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 20px rgba(59, 89, 152, 0), inset 0 0 5px #344e86, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: 0 0 0 20px rgba(59, 89, 152, 0), inset 0 0 5px #344e86, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 20px rgba(59, 89, 152, 0), inset 0 0 5px #344e86, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

.facebook:hover,
.facebook:focus {

  background-color: #3b5998;
  -webkit-box-shadow: 0 0 0 10px rgba(76, 112, 186, 0.5), inset 0 0 0 0 #3b5998, 0 0 5px 2px #10182a;
  -moz-box-shadow: 0 0 0 10px rgba(76, 112, 186, 0.5), inset 0 0 0 0 #3b5998, 0 0 5px 2px #10182a;
  box-shadow: 0 0 0 10px rgba(76, 112, 186, 0.5), inset 0 0 0 0 #3b5998, 0 0 5px 2px #10182a;

}

.facebook:hover,
.facebook:focus {

  text-shadow: -1px -1px #2d4373;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);

}

.facebook:active,
.facebook:checked {
 
  background-color: #344e86;
  -webkit-box-shadow: 0 0 0 10px rgba(52, 78, 134, 0.5);
  -moz-box-shadow: 0 0 0 10px rgba(52, 78, 134, 0.5);
  box-shadow: 0 0 0 8.33333333px rgba(52, 78, 134, 0.5);
  -webkit-box-shadow: 0 0 0 10px rgba(52, 78, 134, 0.5), inset 0 0 0 0 #2d4373;
  -moz-box-shadow: 0 0 0 10px rgba(52, 78, 134, 0.5), inset 0 0 0 0 #2d4373;
  box-shadow: 0 0 0 10px rgba(52, 78, 134, 0.5), inset 0 0 10px #10182a;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}

.facebook:active,
.facebook:checked {

  color: rgba(255, 255, 255, 0.8);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}
/*Facebook*/

/*Instagram*/
.instagram {

  outline: 0 none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 55px;
  padding: 0px;
  margin-right: 10px; 
  color: #ffffff;
  font-size: 1.5em;
  text-align:center;
  text-decoration: none;
  border: 0 none;
  background:hsl(0 0% 10%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 20px rgba(63, 114, 155, 0), inset 0 0 5px #386589, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: 0 0 0 20px rgba(63, 114, 155, 0), inset 0 0 5px #386589, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 20px rgba(63, 114, 155, 0), inset 0 0 5px #386589, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

.instagram:hover,
.instagram:focus {

  background-color: #e93e75;
  -webkit-box-shadow: 0 0 0 10px rgba(84, 140, 185, 0.5), inset 0 0 0 0 #3f729b, 0 0 5px 2px #13222e;
  -moz-box-shadow: 0 0 0 10px rgba(84, 140, 185, 0.5), inset 0 0 0 0 #3f729b, 0 0 5px 2px #13222e;
  box-shadow: 0 0 0 10px rgba(84, 140, 185, 0.5), inset 0 0 0 0 #3f729b, 0 0 5px 2px #13222e;

}

.instagram:hover,
.instagram:focus {

  text-shadow: -1px -1px #305777;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);

}

.instagram:active,
.instagram:checked {

  background-color: #386589;
  -webkit-box-shadow: 0 0 0 10px rgba(56, 101, 137, 0.5);
  -moz-box-shadow: 0 0 0 10px rgba(56, 101, 137, 0.5);
  box-shadow: 0 0 0 8.33333333px rgba(56, 101, 137, 0.5);
  -webkit-box-shadow: 0 0 0 10px rgba(56, 101, 137, 0.5), inset 0 0 0 0 #305777;
  -moz-box-shadow: 0 0 0 10px rgba(56, 101, 137, 0.5), inset 0 0 0 0 #305777;
  box-shadow: 0 0 0 10px rgba(56, 101, 137, 0.5), inset 0 0 10px #13222e;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}

.instagram:active,
.instagram:checked {

  color: rgba(255, 255, 255, 0.8);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}
/*Instagram*/

/*Pinterest*/
.pinterest {

  outline: 0 none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 55px;
  padding: 0px;
  margin-right: 10px; 
  color: #ffffff;
  font-size: 1.5em;
  text-align:center;
  text-decoration: none;
  border: 0 none;
  background-color: rgba(200, 35, 44, 0.8);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 20px rgba(200, 35, 44, 0), inset 0 0 5px #b21f27, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -moz-box-shadow: 0 0 0 20px rgba(200, 35, 44, 0), inset 0 0 5px #b21f27, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 20px rgba(200, 35, 44, 0), inset 0 0 5px #b21f27, 0 1px 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

.pinterest:hover,
.pinterest:focus {

  background-color: #c8232c;
  -webkit-box-shadow: 0 0 0 10px rgba(222, 64, 73, 0.5), inset 0 0 0 0 #c8232c, 0 0 5px 2px #460c0f;
  -moz-box-shadow: 0 0 0 10px rgba(222, 64, 73, 0.5), inset 0 0 0 0 #c8232c, 0 0 5px 2px #460c0f;
  box-shadow: 0 0 0 10px rgba(222, 64, 73, 0.5), inset 0 0 0 0 #c8232c, 0 0 5px 2px #460c0f;

}

.pinterest:hover,
.pinterest:focus {

  text-shadow: -1px -1px #9d1b22;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);

}

.pinterest:active,
.pinterest:checked {

  background-color: #b21f27;
  -webkit-box-shadow: 0 0 0 10px rgba(178, 31, 39, 0.5);
  -moz-box-shadow: 0 0 0 10px rgba(178, 31, 39, 0.5);
  box-shadow: 0 0 0 8.33333333px rgba(178, 31, 39, 0.5);
  -webkit-box-shadow: 0 0 0 10px rgba(178, 31, 39, 0.5), inset 0 0 0 0 #9d1b22;
  -moz-box-shadow: 0 0 0 10px rgba(178, 31, 39, 0.5), inset 0 0 0 0 #9d1b22;
  box-shadow: 0 0 0 10px rgba(178, 31, 39, 0.5), inset 0 0 10px #460c0f;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}

.pinterest:active,
.pinterest:checked {

  color: rgba(255, 255, 255, 0.8);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;

}
/*Pinterest*/

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

428 Visualizações

5 respostas para “Botões de redes sociais html”

  1. fun88 disse:
    22 de abril de 2024 às 04:35

    I think this is one of the most important information for me.
    And i’m glad reading your article. But want to remark
    on some general things, The site style is ideal,
    the articles is really excellent : D. Good job, cheers

    Responder
  2. โปรโมชั่น YES8 disse:
    15 de março de 2024 às 04:03

    Aw, this was an exceptionally nice post. Taking the time and actual effort to
    create a good article… but what can I say… I hesitate a lot and
    never manage to get anything done.

    Responder
  3. califo online disse:
    14 de março de 2024 às 13:40

    I have been surfing on-line greater than 3 hours lately, but I by no means found any
    fascinating article like yours. It is beautiful value enough for me.
    In my view, if all web owners and bloggers made good
    content as you probably did, the net will likely be much more useful than ever before.

    Responder
  4. loopnerd disse:
    28 de dezembro de 2022 às 09:09

    Olá Guilherme, Tudo ok!
    Obrigado pela visita no BLOG.

    Esta dando algum conflito de css com seu site.

    Tenta fazer alguma alteração assim:

    .box-social {
    max-width: 300;
    float:left;
    padding: 20px 30px;
    text-align: center;
    background-color: #F0F2F5;
    }

    ___________

    tenta tirar o ( margin: 0 auto; )
    e botar ( float:left; ).

    Se você quiser manda o link aqui no comentário que vou analisar o código e tentar te ajudar.

    Responder
  5. Guilherme Poisl disse:
    28 de dezembro de 2022 às 08:50

    Bom dia,

    estou colando esse código no meu footer dentro de uma div, e os botões aparecem no header.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados