How Do I Use My Own Buttons For Google Login And Facebook Login?

How do i use my own buttons for google login and facebook login?

This is my current code, Hide Copy Code

 <span id="signinButton">          
          <span
            class="g-signin"
            data-callback="signinCallback"
            data-clientid="XXXXXXXXXXXXXXXX"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://ift.tt/1jv0cif"
            data-scope="http://ift.tt/18tkxUQ">
          </span>
        </span><br />
            <fb:login-button  size="large" >  Sign   In </fb:login-button>

but these buttons are coming in different size. So i want to add two other buttons which will trigger these actions, Hide Copy Code

<input type="button" class="btn btn-primary" value=""Connect with facebook> //Clicking on this button should trigger fb:login-button
<input type="button" class="btn btn-danger" value=""Connect with Google>/Clicking on this button should trigger google button

I have seen some sites using their on buttons for google\facebook login. How do i do this?