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>