How do I style/center text a google sign in button?

user_9344887 0
Viewed 193

I would like to have my google sign in button resemble the one I have linked here, but i'm having issues trying to center both the text and the icon exactly in line with each other. What would I have to add/change?

.content{
    display: grid;
    place-items: center;
    padding: 10px;
    padding-left: 60px;
    padding-right: 60px;
    width: fit-content;
    border: 1px solid gray;
    border-radius: 20px;
    transition: 0.5s;
}

.content:hover{
    cursor: pointer;
    background-color: honeydew;
}
<button class="content"> 
           <span> <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/> 
            Sign up Using Google</span>
        </button>

hcr

This is the desired result ^

css html
3 Answers

Flexbox is a good display layout for this.

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  padding-left: 60px;
  padding-right: 60px;
  width: fit-content;
  border: 1px solid gray;
  border-radius: 20px;
  transition: 0.5s;
}

.content:hover {
  cursor: pointer;
  background-color: honeydew;
}

img {
  padding-right: 0.25rem;
}
<button class="content"> 
    <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/>
    <span>Sign up Using Google</span>
</button>

user_4597500 

.content{
    display: grid;
    place-items: center;
    padding: 10px;
    padding-left: 60px;
    padding-right: 60px;
    width: fit-content;
    border: 1px solid gray;
    border-radius: 20px;
    transition: 0.5s;
}

.content img{
  vertical-align:bottom;
}

.content:hover{
    cursor: pointer;
    background-color: honeydew;
}
<button class="content"> 
           <span> <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/> 
            Sign up Using Google</span>
        </button>

user_119779290

Here is a simplified version using Roboto from Google's branding guidelines and higher res logo.

.content{
    display: flex;
    padding: 12px 56px;
    border: 1px solid gray;
    border-radius: 50px;
    transition: 0.5s;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    align-items: center;
    color: #3d4055;
    background: #fff;
}

img {
  height: 20px;
  margin: 0 6px 0 0;
}

.content:hover{
    cursor: pointer;
    background-color: honeydew;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">


<button class="content">
  <img src="https://freesvg.org/img/1534129544.png" alt="google"/>Sign up Using Google
</button>

user_174676690
Related