When MemberMouse is activated on your website you'll get access to over 60 web 2.0 button styles. You can easily transform any link into a button by using the mm-button
class as follows:
<a href="#" class="mm-button">Sample Button</a>
The result will look like this:
Change the Size
There are 3 different button sizes supported: small, medium and large. You can create different size buttons as follows:
Small<a href="#" class="mm-button small">Sample Button</a> | |
Medium<a href="#" class="mm-button">Sample Button</a> | |
Large<a href="#" class="mm-button large">Sample Button</a> |
Rounded Corners
There are two different options for rounding the corners, standard rounding and pill-button rounding. You can control the rounding of the corners as follows:
Standard<a href="#" class="mm-button">Sample Button</a> | |
Pill Button<a href="#" class="mm-button rounded">Sample Button</a> |
Change the Color
There are 11 different button colors supported: white, grey, black, light blue, blue, green, red, orange, yellow, pink and purple. You can create different color buttons as follows:
White<a href="#" class="mm-button">Sample Button</a> | |
Grey<a href="#" class="mm-button grey">Sample Button</a> | |
Black<a href="#" class="mm-button black">Sample Button</a> | |
Light Blue<a href="#" class="mm-button light_blue">Sample Button</a> | |
Blue<a href="#" class="mm-button blue">Sample Button</a> | |
Green<a href="#" class="mm-button green">Sample Button</a> | |
Red<a href="#" class="mm-button red">Sample Button</a> | |
Orange<a href="#" class="mm-button orange">Sample Button</a> | |
Yellow<a href="#" class="mm-button yellow">Sample Button</a> | |
Pink<a href="#" class="mm-button pink">Sample Button</a> | |
Purple<a href="#" class="mm-button purple">Sample Button</a> |
Create Variations by Combining Attributes
By using the size, rounding and color attributes together you can create over 60 variations. The following are sample variations for a green button:
Small Green Button<a href="#" class="mm-button green small">Sample Button</a> | |
Medium Green Button<a href="#" class="mm-button green">Sample Button</a> | |
Large Green Button<a href="#" class="mm-button green large">Sample Button</a> | |
Small Green Pill Button<a href="#" class="mm-button green small rounded">Sample Button</a> | |
Medium Green Pill Button<a href="#" class="mm-button green rounded">Sample Button</a> | |
Large Green Pill Button<a href="#" class="mm-button green large rounded">Sample Button</a> |