Centering text in a button but having a left aligned visual icon for that same button?

Question

I have a need to design a button that looks like this:

Here is what I currently have:

The two things I cannot solve:

How do I align just that dot to the left?
How do I center the text while having the dot still there?

.login-button {
    width: 85%;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: #003920;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 3px;
}
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center-button">
<button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span> Login with Google</button>

score 1 · Answer 1 · answered Mar 08 '21 at 19:02

1

Perhaps float: left is what you are looking for?

Also, this will slightly push the text to the right.

You can put your text inside a span and add some right padding equal in size to the width of your circle, which will center it.

<span style="padding-right: 20px;">Login with Google</span>

.login-button {
    width: 85%;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: #003920;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 3px;
    float: left;
}
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center-button">
<button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span><span style="padding-right: 20px;">Login with Google</span></button>

answered Mar 08 '21 at 19:02

cseitz

1,116
4
16

Pfft... Well, I feel dumb for forgetting that. Thanks. – Matthew Gaiser Mar 08 '21 at 19:12
No worries. I've been building websites for almost 3 years now and I still forget how to import CSS style sheets lol. – cseitz Mar 08 '21 at 19:13
hoever float will consume space and as such the text is no longer centered within the button. – tacoshy Mar 08 '21 at 19:16
Yep, which I covered a solution for in my answer. – cseitz Mar 08 '21 at 19:17
yes but then you need to sue clac which you also said and calculate the rigth value. using position: relative + position: absolute would be easier as the dot is no longer aprt of the normal flow. The way more simple solution. – tacoshy Mar 08 '21 at 19:18
Float doesn't work with position absolute. This is the simplest way to do it, but there are certainly more proper ways to do it like using position absolute. – cseitz Mar 08 '21 at 19:19

Hemant Parashar · Answer 2 · 2021-03-08T20:10:28.207

1

While coding something like this I tend to give the layout decisions to the parent element ( here login btn ) while child elements should just specify their widths and let the parent handle the placing. ( It's just how I like to do it. No hard & fast rule. )

So you can do something like this :

.login-button {
  width: 85%;
  display: flex;
  align-items: center;
}

.dot {
  height: 20px;
  width: 20px;
  background-color: #003920;
  border-radius: 50%;
  margin-bottom: 3px;
}

.text {
  flex: auto 1 1;
  text-align: center;
}

<div class="center-button">
  <button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
<span class="dot"></span> <span class="text">Login with Google</span></button>
</div>

edited Mar 08 '21 at 20:10

answered Mar 08 '21 at 19:07

Hemant Parashar

3,684
2
16
23

why use `width: calc(100% - 20px)` ? You applied a flexbox to the button. You could simply use `flex-grow: 1` to the text instead of calculatin its width. – tacoshy Mar 08 '21 at 19:20
sure...good suggestion ! – Hemant Parashar Mar 08 '21 at 20:11

score 1 · Answer 3 · answered Mar 08 '21 at 19:15

Give the button a position: relative and the dot a position:absolute. Also change height and width to 1em to fit the line height.

.login-button {
  width: 85%;
  position: relative;
}

.dot {
  height: 1em;
  width: 1em;
  background-color: #003920;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 2px;
}

.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="center-button">
  <button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span> Login with Google</button>

Centering text in a button but having a left aligned visual icon for that same button?

3 Answers3