Styled buttons componentAvailable since EcoComposer 2.0

Styled buttons examples
Default SCSS values
SCSS implementation
HTML implementation

Buttons with ripple effect

The default values are :

border-radius : .5rem * theming.$font-size,
padding : 1rem * theming.$font-size 2rem * theming.$font-size,
print : false,
ripple--border : 'ripple--border',
ripple--color : 'ripple--color',
ripple--active--background-color : 'ripple--active--background-color',
ripple--hover--background-color : 'ripple--hover--background-color',
ripple--background-color : 'ripple--background-color',
suffix : '',
themes : (
  light : (
    default--ripple--border : 0,
    default--ripple--color : #222,
    default--ripple--active--background-color : lighten($-light-button-color, 10),
    default--ripple--hover--background-color : $-light-button-color,
    default--ripple--background-color : darken($-light-button-color, 10)
  ),
  dark : (
    default--ripple--border : 0,
    default--ripple--color : #333,
    default--ripple--active--background-color : lighten($-light-button-color, 10),
    default--ripple--hover--background-color : $-light-button-color,
    default--ripple--background-color : darken($-light-button-color, 10)
  )
)

We can implement it that way :

@include ripple.create();
@include ripple.create(
  (
    themes : $themes,
    border-radius : 5px
  )
);

We can implement it that way :

-2

is the suffix here. <button type=button class=ripple-2>Click me!</button>