0

Tenho botão do social login do Google e Facebook funcionando na minha aplicação, porém gostaria de configurar ambos redondos.

Estou usando a configuração padrão para ambos.

Google

<div id="my-signin2" class="mx-auto"></div>

function renderButton() {
          gapi.signin2.render('my-signin2', {
            'scope': 'profile email',
            'width': 220,
            'height': 40,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': onSuccess
          });
        };

Facebook

<div class="fb-login-button" data-scope="public_profile,email" data-onlogin="checkLoginState()" data-width="220" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false">Sign in with Facebook</div>
0

2 Respostas 2

1

acrescente essa classe ao seu css. em seguida adicione ela ao item que quer deixar redondo.

.itemredondo {
  font-size:24px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  border:1px solid #ccc;
  margin:0px auto !important;
  color:inherit;
  opacity:0.75;
}
<div class="itemredondo">G<div>
<div class="itemredondo">F<div>

1

É só você colocar no seu CSS :

chamadaDoBtn{ border-radius : 100% }

Dai assim, ele ficará redondinho.

Nota: O comando border-radius, mede a porcentagem de 'redondez' que você quer, o 100% deixaria ele como uma bola, e se você for diminuindo esse valor, o retângulo ficará mais aparente e com as bordar arredondadas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .