Add CSS button?

UI Builder
1

This site has CSS buttons with animation: GitHub - eludadev/css-buttons: 100 Modern CSS Buttons, Free And Royalty Free.
For example, the Slide Triangle button CSS code:
.btn-5 {
–tilt: 40px;

display: block;
box-sizing: border-box;
padding: 20px 45px;
border-radius: 999px;

position: relative;
overflow: hidden;

text-transform: uppercase;
border: 1px solid currentColor;
}

.btn-5 span {
font-weight: 900;
mix-blend-mode: difference;
}

.btn-5:before {
content: “”;
z-index: -1;
width: calc(100% + var(–tilt));
height: 100%;

position: absolute;
top: 0;
left: calc(-100% - var(–tilt));
background: white;
clip-path: polygon(
0 0,
calc(100% - var(–tilt)) 0,
100% 50%,
calc(100% - var(–tilt)) 100%,
0 100%
);
transition: transform 0.4s;
}
.btn-5:hover:before {
transform: translateX(100%);
}

To test in UI Builder, I

  • created a page,
  • in the THEME tab created/named a ‘new extension’ and copied in the code,
  • put a button on the page,
  • and put ‘btn-5’ in the Classes setting
    In Preview, it changed the button text to orange, but no action. On a block component: gave it rounded corners but again no action.

Questions:

  • is this not possible in UI Builder?
  • am I leaving something out?
  • should I use a different component?
  • suggestions?
2

Hello @Jim_Austin

There are some mistakes in the styles:

  • variable should be in the parent “namespace”, but not in the neighbor
  • no need z-index

Also, I made a little refactoring, and now this code works well.

.bl-button {
  --tilt: 40px;

  &.btn-5 {
    display: block;
    box-sizing: border-box;
    padding: 20px 45px;
    border-radius: 999px;

    position: relative;
    overflow: hidden;

    text-transform: uppercase;
    border: 1px solid currentColor;

    & span {
      font-weight: 900;
      mix-blend-mode: difference;
    }

    &:before {
      content: '';
      width: calc(100% + var(--tilt));
      height: 100%;

      position: absolute;
      top: 0;
      left: calc(-100% - var(--tilt));
      background: white;
      clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
      transition: transform 0.4s;
    }

    &:hover:before {
      transform: translateX(100%);
    }
  }
}

There’s only one thing left to do, set the right colors.

3

Dima,
And what would the “right colors” be? I’ve tried transparent and a light color; when the button is pressed there’s a gray ‘wash’, but not the actions shown on the GitHub page. A UI Builder standard button shows a much lighter gray wash when pressed, all over and not moving.

I’m a newbie to CSS code so there’s a lot here I don’t understand, like should the button be animated continuously (like the GitHub examples) or only when pressed?

The test UI builder page (below) has your code for Theme/Extensions on two different buttons, and GitHub example code (for different actions) on two more buttons.

UI multiple buttons
UI multiple buttons965×683 68.8 KB

They all show similar ‘gray wash’ action when pressed. Confusing me even more, the ‘gray wash’ spread varies depending on where the button is clicked!?

4

And what would the “right colors” be?

Which you want to use.

I’m a newbie to CSS code so there’s a lot here I don’t understand, like should the button be animated continuously (like the GitHub examples) or only when pressed?

Only when hovered. You could check it in examples of provided library - https://css-buttons.web.app/button/?id=5

They all show similar ‘gray wash’ action when pressed.

For different animation you must use different styles and classes. I showed you an example where could be a mistakes, so you may use any of them.

Confusing me even more, the ‘gray wash’ spread varies depending on where the button is clicked!?

I couldn’t answer this question. Styles which you provide not include any animation for click.