Social button login Google and Facebook round

Asked

Viewed 336 times

0

I have Google and Facebook social login button working in my application, but I would like to set both round.

I’m using the default setting for both.

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>
css

2 answers

1

Just put it in your CSS : 

chamadaDoBtn{ border-radius : 100% }

So he’ll be all round.

Note: The border-Radius command, measures the percentage of 'round' you want, the 100% would leave it as a ball, and if you decrease this value, the rectangle will be more apparent and with the rounded edges.

1

add this class to your css. then add it to the item you want to round.

.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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.