fbpx

Using MemberMouse Button Styles

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: interview with Brian Kurtz

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>
interview with Brian Kurtz
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>
interview with Brian Kurtz
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>
interview with Brian Kurtz
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>
Was this article helpful?

Related Articles

Can’t find the answer you’re looking for?

Reach out to our Customer Success Team
Contact us!