.btn-link not working in bootstrap

Question

I'm unable to convert a button to appear as link in bootstrap. .btn-link seem to be not working. I'm exactly not clear on where I'm going wrong. The intention is to covert the following google sign in button into link. I used the bootstrap.min.css file and it somehow disturbs the entire site.

P.S. I'm new to bootstrap

HTML

<button class="g-signin btn btn-link" 
               data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
               data-requestvisibleactions="http://schemas.google.com/AddActivity"
               data-clientId=""
               data-accesstype="offline"
               data-callback="mycoddeSignIn"
               data-theme="dark"
               data-cookiepolicy="single_host_origin">Login with G+
</button>

CSS

.btn-link,
.btn-link:active,
.btn-link[disabled] {
 background-color: transparent;
 background-image: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
  box-shadow: none;
  }
 .btn-link {
  border-color: transparent;
  cursor: pointer;
  color: #0060a1;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  }
  .btn-link:hover,
  .btn-link:focus {
  color: #00a0e2;
  text-decoration: underline;
  background-color: transparent;
 }
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: #333333;
text-decoration: none;
}

Answer 1

add

.btn-link:hover, .btn-link:focus{
     background: transparent!important;' 
}

look at the end of the fiddle