Michael Janea

MJ BUTTONS (603 downloads)

An easy to use and colorful set of buttons made in CSS3.

  • 8 color variations
  • 3 available sizes
  • Easy to implement, you just need to add a couple of classes
  • Works on inputs and buttons
  • No images required

 

Demos

Tags

<button type="button" class="mj-button">Button</button>
			<input type="submit" class="mj-button" value="Input" />
Color Variations

<button type="button" class="mj-button">Default</button>
<button type="button" class="mj-button black">Black</button>
<button type="button" class="mj-button blue">Blue</button>
<button type="button" class="mj-button green">Green</button>
<button type="button" class="mj-button orange">Orange</button>
<button type="button" class="mj-button pink">Pink</button>
<button type="button" class="mj-button red">Red</button>
<button type="button" class="mj-button yellow">Yellow</button>
Sizes

<button type="button" class="mj-button small">Small Button</button>
<button type="button" class="mj-button">Default Button</button>
<button type="button" class="mj-button large">Large Button</button>
<button type="button" class="mj-button block">100% Width</button>
Active State

<button type="button" class="mj-button active">Default</button>
<button type="button" class="mj-button black active">Black</button>
<button type="button" class="mj-button blue active">Blue</button>
<button type="button" class="mj-button green active">Green</button>
<button type="button" class="mj-button orange active">Orange</button>
<button type="button" class="mj-button pink active">Pink</button>
<button type="button" class="mj-button red active">Red</button>
<button type="button" class="mj-button yellow active">Yellow</button>
Disabled State

<button type="button" class="mj-button" disabled="disabled">Disabled Button</button>
Rounded

<button type="button" class="mj-button rounded">Default</button>
<button type="button" class="mj-button black rounded">Black</button>
<button type="button" class="mj-button blue rounded">Blue</button>
<button type="button" class="mj-button green rounded">Green</button>
<button type="button" class="mj-button orange rounded">Orange</button>
<button type="button" class="mj-button pink rounded">Pink</button>
<button type="button" class="mj-button red rounded">Red</button>
<button type="button" class="mj-button yellow rounded">Yellow</button>
Gradient

<button type="button" class="mj-button gradient">Default</button>
<button type="button" class="mj-button black gradient">Black</button>
<button type="button" class="mj-button blue gradient">Blue</button>
<button type="button" class="mj-button green gradient">Green</button>
<button type="button" class="mj-button orange gradient">Orange</button>
<button type="button" class="mj-button pink gradient">Pink</button>
<button type="button" class="mj-button red gradient">Red</button>
<button type="button" class="mj-button yellow gradient">Yellow</button>

 

Directions

  1. Extract the downloaded zip file (mjButtons.zip)
  2. Insert below codes to the <head> section of your page
    <link rel="stylesheet" type="text/css" href="mjButtons.css" />
  3. Add buttons according to your preferences. Use the demos as your reference.

 

Logs

 

Download MJ Buttons

CONTACT ME

Your opinion is important to me. Take part on my goal to continuously improve my work by giving your suggestions and comments. You may also send your concerns or inquiries here.