Buttons

Sized Buttons

Different button sizes can be set to the button. Spacing in the button automatically adapts to the font-size in the button.

To use the rounded, make sure to enable the output by defining $output-button-rounded: true; before @import of svd-style.

Rounded Buttons

To use the rounded, make sure to enable the output by defining $output-button-rounded: true; before @import of svd-style.

Colored Buttons

All colors in the current colorset can be used as colors for buttons.

To use the colors, make sure to enable the output by defining $output-button-colors: true; before @import of svd-style.

Basic icon buttons

There is a selected set of icons standard available which uses default html special characters for the icons.

Button icon on the right

Add a class .button-icon--right to the button.

Button icon only

Add a class .button-icon--only to the button.

Button icon colored

Define the custom property --button-icon-color to any parent element of the button or the button itself. When not set, the color of the icon will be the same as the text in the button.

To use the icons, make sure to enable the output by defining $output-button-icons: true; before @import of svd-style.

svd.im — playground

Svd.im is the online playground of Sil van Diepen. You can find here small little projects and test Sil has been making. Nothing of this is ready, tested, done or anything. It's just for testing and fun. Feel free to check it out.