Simple Button
|
|
.mod-example
.button Praesent quis rhoncus
br
.mod-example
.button[disabled] Praesent quis rhoncus
|
Info Button
|
|
.mod-example
.button.info Sed vehicula odios
|
Button on colored background
|
|
.mod-example style='display: flex; justify-content: center; background-color: #00a4a5; padding: 25px'
.button.solid-background Vestibulum ultricies mi
|
|
|
.mod-example style='display: flex; justify-content: center; background-color: #66c8c9; padding: 25px'
.button.solid-background.solid-background-primary Vestibulum ultricies mi
|
|
|
.mod-example style='display: flex; justify-content: center; background-color: #3ad1ba; padding: 25px'
.button.solid-background.solid-background-secondary Vestibulum ultricies mi
|
|
|
.mod-example style='display: flex; justify-content: center; background-color: #f08f5c; padding: 25px'
.button.solid-background.solid-background-tertiary Vestibulum ultricies mi
|
Action Button
|
|
.mod-example
.button.action Ut dictum interdum
br
.mod-example
.button.action.lowlight Ut dictum interdum
br
.mod-example
.button.action[disabled] Ut dictum interdum
|
Button with Icon
|
|
.mod-example
.button.i-openbook Read Our Guidlines
br
.mod-example
.button.action.i-star Get Your Checkup
|
Mini Button
|
|
.mod-example
.button.mini Proin finibus nec
br
.mod-example
.button.mini.i-openbook Proin finibus nec
|
Disabled Button Animation
|
|
.mod-example
.button.action[disabled] Mauris eget mauris
|
$('.button[disabled]').on('click', function() {
$(this).addClass('shaking').text('You shall not pass!');
});
Button with graphic
|
|
.mod-example
a.button.graphic href='#'
img.graphic-image src='images/heart-sign.png' width='60'
span.graphic-text Mauris eget mauris
|
|
|
css:
.button.graphic {
max-width: 220px;
}
|
Button like tag
|
|
.mod-example
a.button.tag #praesent sodales
a.button.tag #proin finibus consequat
a.button.tag #aliquam faucibus
|
Expanded full width on mobile
Phasellus Ullamcorper Sed Eu Ex Aenean Tristique
|
.mod-example
.button.expanded-on-mobile Phasellus Ullamcorper
.button.i-openbook.expanded-on-mobile Sed Eu Ex
.button.mini.expanded-on-mobile Aenean Tristique
|
Stacked Buttons
|
|
.mod-example
.stacked-buttons
.button.i-phone
| (855) 695-2255
.button.i-chat Chat with an Expert
|
Hamburger Button
Styles from hamburger vendor file
Standard
|
|
button.hamburger type="button"
span.hamburger-box
span.hamburger-inner
|
Is active
|
|
button.hamburger.is-active type="button"
span.hamburger-box
span.hamburger-inner
|
Javascript
$('.hamburger').click(function() {
$(this).toggleClass('is-active');
});
