Round Buttons

[Lange]

Hello!
I would like to make some round buttons on a website and i already found a css solution that looks like that:

li {
  width: 15%;
  display: inline-block;
}

.button {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;

  &__link {
    border: 1px solid red;
    display: block;
    width: 100%;
    padding-top: 50%;
    padding-bottom: 50%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    line-height: 2em;
    font-size: 2em;
    margin-top: -1em;
    background: #E9C46A;
  }
}

As far as I understand i can’t really use it like this in the element css, my Question is: How do i integrate it on my website without changing all of the buttons?

[tristup]

Hi @Lange,
Thanks for reaching out.

Every specific element has it own section to add the CSS, please go to the Customize tab of that element and then Element CSS to Edit CSS.

And please add $el as a prefix to your CSS class, before implementing it, so it will work on the specific element only.
E.G: $el.button{...}

Please remember that we don’t offer any support to the custom codes or issues related to it.

Thanks