Moray CSS Button Pack

Download v1.1 for FREE!

The Moray Button Pack is intended to make it easy to build your own buttons and mix and match features. Follow the directions below on how to make use of our buttons on your own site. You may use the whole CSS file in your site, or copy and paste the specific buttons you want. This is inteded for people with little or no CSS knowledge but we wont shy away any advanced users. There are THREE main button ID types, they are named; moray, murry, and marmalade. From here, you can select either a plain button, radient button, glossy buttons or transition buttons. Once that has been determined, you are able to add more features to the button such as text shadow, box shadow, rounded corners, glow and a dip.

To install the css file into your site, the following code needs to be inserted inside the <head></head> tags:

<link rel="stylesheet" href="moray-css-buttons_1.1.css" type="text/css" />

Like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="moray-css-buttons_1.1.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moray CSS Buttons</title>
</head><body>Content goes here</body</html >

Choose an ID

Picking an ID will set the font, font size, color, and padding around the font. These ID's can be altered if needed for specific font or color changes. You MUST have an ID set otherwise your buttons will look very bland. These three IDs have a lot of similar features, but they were inteded to be changed by the user if needed.

moray

The moray ID has attributes of:
color:#ffffff;
font-family: verdana, sans-serif;
font-size:14px;
font-weight:bold;
display:inline-block;
padding:5px 15px;
text-decoration:none;

murry

The moray ID has attributes of:
color:#ffffff;
font-family: verdana, sans-serif;
font-size:14px;
font-weight:bold;
display:inline-block;
padding:8px 25px;
text-decoration:none;

marmalade

The moray ID has attributes of:
color:#ffffff;
font-family: verdana, sans-serif;
font-size:14px;
font-weight:bold;
display:inline-block;
padding:10px 35px;
text-decoration:none;

Plain Buttons

-The following buttons are using the "moray" ID, unless otherwise noted.
plain-"color", eg: plain-red
code: <a href="#" id="moray" class="plain-red">Button Name</a>

Red id="moray" class="plain-red"

Blue id="moray" class="plain-blue"

Green id="moray" class="plain-green"

Orange id="moray" class="plain-orange"

Yellow id="moray" class="plain-yellow"

Purple id="moray" class="plain-purple"

Black id="moray" class="plain-black"

Brown id="murry" class="plain-brown"

Grey id="murry" class="plain-grey"

Snazz it up!

With our buttons you can add different attributes to your buttons. For example take the id="moray" class="plain-red" button example from above, pretty boring right? If you want to add more rounded corners to the button, you can add these attributes into your class:

Rounded Corners
id="moray" class= "curvey plain-red", id="moray" class="curvey plain-blue"
You get this: Red Blue

There are other attribute you can use instead of curvey. They are as follows:

curve: Green 6 pixel radius

curvey: Orange 10 pixel radius

curvier: Black 15 pixel radius

curviest: Purple 20 pixel radius

left-curve: Curve to the left! 6 pixel radius

right-curve: Curve to the right! 6 pixel radius

Text Shadow
-gives a slight shadow behind the text.
textShadow Text Shadow! id="moray" "curvey textShadow plain-orange"

Box Shadow
-gives your box some character!
boxShadow Blue Box Shadow! id="moray" class="curvey boxShadow plain-blue"

Dip
-button will slightly dip down upon press
dip Red & Dip! id="moray" class="curvey dip boxShadow plain-red"

Glow
-button will glow using mulitiple colors to choose.
boxGlow, boxGlowY, boxGlowG, boxGlowR, boxGlowP, boxGlowB, boxGlowO
orange glow id="moray" class="curvey boxGlowY plain-orange"

**These attributes can be added to ANY buttons

Radient Buttons

radient-"color", eg: radient-blue
<a href="" class="murry radient-blue>Button Name</a>

The following buttons are using the "murry" ID and the "curve" and "boxShadow" attributes to give it rounded corners and shadow, see the blue box above for explanation.

Red id="murry" class="curve boxShadow radient-red"

Orange id="murry" class="curve boxShadow radient-orange"

Blue id="murry" class="curve boxShadow radient-blue"

Green id="murry" class="curve boxShadow radient-green"

Yellow id="murry" class="curve boxShadow radient-yellow"

Purple id="murry" class="curve boxShadow radient-purple"

Black id="murry" class="curve boxShadow radient-black"

Brown id="murry" class="curve boxShadow radient-brown"

Grey id="murry" class="curve boxShadow radient-grey"

Lets see something snazzy.....

Back Next
id="murry" class="left-curve radient-blue", id="murry" class="right-curve radient-blue"

Start Pause Resume
id="murry" class="left-curve radient-green", id="murry" class="radient-green", id="murry" class="right-curve radient-green"

Gloss Buttons

gloss-"color", eg: gloss-orange
<a href="" id="marmalade" class="gloss-blue">Button Name</a>

Gloss buttons are two tone colors giving a gloss effect. This example uses the ID of "marmalade" and uses "curvey" and "textShadow" attributes.

Red Gloss id="marmalade" class="curvey textShadow gloss-red"

Blue Gloss id="marmalade" class="curvey textShadow gloss-blue"

Green Gloss id="marmalade" class="curvey textShadow gloss-green"

Orange Gloss id="marmalade" class="curvey boxShadow gloss-orange"

Yellow Gloss id="marmalade" class="curvey textShadow gloss-yellow"

Purple Gloss id="marmalade" class="curvey textShadow gloss-purple

Black Gloss id="marmalade" class="curvey textShadow gloss-black"

Brown Gloss id="marmalade" class="curvey textShadow gloss-brown"

Grey Gloss id="marmalade" class="curvey textShadow gloss-grey"

Transition buttons

trans-"color", eg: trans-orange
<a href="" id="marmalade" class="trans-green">Button Name</a>

These buttons make use of the CSS3 property "transition".

Red Transition! id="marmalade" class="curve dip boxShadow trans-red"

Blue Transition! id="marmalade" class="curve dip boxShadow trans-blue"

Green Transition! id="marmalade" class="curve dip boxShadow trans-green"

Orange id="marmalade" class="curve dip boxShadow trans-orange"

Yellow! id="marmalade" class="curve dip boxShadow textShadow trans-yellow"

Purple! id="marmalade" class="curve dip boxShadow trans-purple"

Black! id="moray" class="curve dip boxShadow trans-black"

Brown! id="murry" class="curve dip boxShadow trans-brown"

Grey! id="murry" class="curve dip boxShadow trans-grey"

More Snazz.....

Use the following attributes to add a curve to one edge.
"top-left", "bottom-left", "top-right", "bottom-right" Uses 12 pixel border radius.

W00t! id="marmalade" class="bottom-left top-right boxShadow trans-red"

Im a tab!No, Im a tab.Lets just be tabs
id="moray" class="top-left top-right boxShadow gloss-orange"

The Moray CSS Button Pack is free and open, alter as you see fit.

Compatable with Chrome 16+, Safari 3.1+, Firefox 4+, Opera 11+, IE 10 Beta +(Gloss buttons, and Transition buttons are not supported in IE 8, 9 unfortunately)

Moray Button Pack 1.1 created by Moray Labs LLC 2012