Menu Demo Video and Button Classes

Watch Demo

Watch short video on menu component on how to build simple menu.

Button Classes

Now you can add classes to buttons for custom styling.

Example of styling shoelace button:

To view the code snippet from the widget, open the Changelog in a new tab.

Button class example: "pink"

You can paste the code snippet above the "sl-button" component into your code editor.

<style>
  sl-button.pink::part(base) {
    /* Set design tokens for height and border width */
    --sl-input-height-medium: 48px;
    --sl-input-border-width: 4px;
 
    border-radius: 0;
    background-color: #ff1493;
    border-top-color: #ff7ac1;
    border-left-color: #ff7ac1;
    border-bottom-color: #ad005c;
    border-right-color: #ad005c;
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 2px 10px #0002;
    transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
  }
 
  sl-button.pink::part(base):hover {
    transform: scale(1.05) rotate(-1deg);
  }
 
  sl-button.pink::part(base):active {
    border-top-color: #ad005c;
    border-right-color: #ff7ac1;
    border-bottom-color: #ff7ac1;
    border-left-color: #ad005c;
    transform: scale(1.05) rotate(-1deg) translateY(2px);
  }
 
  sl-button.pink::part(base):focus-visible {
    outline: dashed 2px deeppink;
    outline-offset: 4px;
  }
</style>

back

Shoelace Package

Menu Demo Video and Button Classes

Watch Demo

Button Classes