Styled buttons componentAvailable since EcoComposer 2.0

Styled buttons examples
Default SCSS values
SCSS implementation
HTML implementation

Buttons with ripple effect

The defaults 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>