Question 299634 in CSS Question posted in
Some basic documentation can be found here.

Css – Flexbox button with SVG icon. The text overflowing the button

I have the following code that behaves quite weird. My expectation is the button width change to let the contents appear inside the button.

Unfortunately the text is overflowing the button and I cannot find how to fix it.

Does anyone see what I do wrong with it? I’ve tried several different options and none of them worked.

:root {
    --green: hsl(150.22deg 60.35% 44.51%);
    --green-dark: hsl(150.22deg 60.35% 35%);
    --green-light: hsl(148.89deg 87.1% 93.92%);
    --blue: hsl(202.86deg 77.78% 15.88%);
}

.btn {
    text-decoration: none;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: capitalize;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.btn--green {
    background-color: var(--green);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.btn:has(svg) {
    gap: 0.75rem;
}

.btn svg {
    display: block;
    max-height: 16px;
    max-width: 16px;
    flex-shrink: 0;
    fill: #fff;
}
<a href="#" class="btn btn--green">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg>
    Button With Icon
</a>

<br>

<a href="#" class="btn btn--green">
    Button Without Icon
</a>
Tags:

2

Answers


  1. 0

    Please let me know if this is what you wanted to achieve

    :root {
    --green: hsl(150.22deg 60.35% 44.51%);
    --green-dark: hsl(150.22deg 60.35% 35%);
    --green-light: hsl(148.89deg 87.1% 93.92%);
    --blue: hsl(202.86deg 77.78% 15.88%);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    
    text-decoration: none;
    white-space: nowrap;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: capitalize;
    user-select: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.btn--green {
    background-color: var(--green);
    color: white;
}

.btn svg {
    height: 16px;
    width: 16px;
    fill: #fff;
}
    <a href="#" class="btn btn--green">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg>
    Button With Icon
</a>

<br>

<a href="#" class="btn btn--green">
    Button Without Icon
</a>
    Login or Signup to reply.
  2. 0

    The button doesn’t have explicit width and the SVG neither. The SVG needs to have some intrinsic width. If you compare button widths from button 1 and button 2 in output from following demo. Then you’ll see the buggy button is 16px short.

    :root {
  --green: hsl(150.22deg 60.35% 44.51%);
  --green-dark: hsl(150.22deg 60.35% 35%);
  --green-light: hsl(148.89deg 87.1% 93.92%);
  --blue: hsl(202.86deg 77.78% 15.88%);
}

.btn {
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: capitalize;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.btn--green {
  background-color: var(--green);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.btn:has(svg) {
  gap: 0.75rem;
}

.btn svg {
  display: block;
  max-height: 16px;
  max-width: 16px;
  flex-shrink: 0;
  fill: #fff;
}

.two svg {
  /* use relative unit 1rem */
  width: 1rem;
}
    1. Original code
<br>
<a href="#" class="btn btn--green">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg> Button With Icon
</a>

<br> 2. With 1rem width set on svg in CSS (<code>.two svg</code>)
<br>
<a href="#" class="btn btn--green two">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg> Button With Icon
</a>

<br> 3. With 16px dimentions set on SVG itself
<br>
<a href="#" class="btn btn--green">
  <svg xmlns="http://www.w3.org/2000/svg" height="16" height="16" viewBox="0 0 128 128">
        <path d="M37 33a3 3 0 0 0 2.2-1L61 10.2V91a3 3 0 0 0 6 0V10.2L88.8 32a3 3 0 0 0 4.2-4.2L66.1.8a3 3 0 0 0-.4-.3l-.3-.1a3 3 0 0 0-.3-.2 3 3 0 0 0-.3 0l-.2-.1a3 3 0 0 0-1.2 0h-.2a3 3 0 0 0-.3.1 3 3 0 0 0-.3.2l-.3.1a3 3 0 0 0-.4.4L35 27.8a3 3 0 0 0 2.1 5.1Z"></path>
        <path d="M125 88a3 3 0 0 0-3 3v22a9 9 0 0 1-9 9H15a9 9 0 0 1-9-9V91a3 3 0 0 0-6 0v22a15 15 0 0 0 15 15h98a15 15 0 0 0 15-15V91a3 3 0 0 0-3-3Z"></path>
    </svg> Button With Icon
</a>

    The flex box doesn’t have any way of knowing button width (max-width) doesn’t count because all the sizing algorithms use width and not max-width for calculations. You need to set explicit width either on <svg> or in .btn svg.

    I suggest using 1 rem as width on SVG because it is relative to the font size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search