Buttons
Buttons are one of the basic elements of web design. They always have a call to action role, so the
buttons have a very important function on a website. Effective buttons can increase conversions and
signups by a hundred percent or more. This is why we have created a huge set of stylish buttons and
included them in the Jumpeye framework. The button styles can be very easily used and customized.
There are fourteen built-in button styles and they support size and color classes.
Size classes
<button class="[small, medium, large] button">Button label</button>
Color classes
<button class="[yellow, blue, red, green, light-gray, dark-gray, transparent-white, transparent-black] button">Button label</button>
Skin style classes
<button class="button [style-1, style-2, style-3, style-4, style-5, style-6, style-7, style-8, style-9, style-10, style-11, style-12, style-13, style-14]">Button label</button>
<button class="[small, medium, large] button">Button label</button>
Color classes
<button class="[yellow, blue, red, green, light-gray, dark-gray, transparent-white, transparent-black] button">Button label</button>
Skin style classes
<button class="button [style-1, style-2, style-3, style-4, style-5, style-6, style-7, style-8, style-9, style-10, style-11, style-12, style-13, style-14]">Button label</button>
There are two button styles (colors) which are semi-transparent: transparent-white and transparent-black.
These button styles are useful when you want to place them on media content, like images, or you are using colored backgrounds.
These button styles are useful when you want to place them on media content, like images, or you are using colored backgrounds.
You can create one level menus including the buttons in an additional div tag and using class "button-group".
This class will ensure a selected state for the pressed menu button. In case you want to create a vertical menu, you have to specify a minimum width for the buttons in order to have the same size for them.
This class will ensure a selected state for the pressed menu button. In case you want to create a vertical menu, you have to specify a minimum width for the buttons in order to have the same size for them.
Note! The style-14 button class uses external files for its textured background. Don't forget to copy them when you move your files from local server to a web server.
Button style-1
Include for button style-1
// Common CSS file for the buttons
<link rel="stylesheet" href="css/buttons/JFButton.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/buttons/JFButtonStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
<link rel="stylesheet" href="css/buttons/JFButton.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/buttons/JFButtonStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
Usage for button style-1
<button class="small light-gray button style-1">Sign in</button>
<button class="medium dark-gray button style-1">Close</button>
<button class="large yellow button style-1">Buy now</button>
<button class="small blue button style-1">Upload</button>
<button class="medium red button style-1">Add to cart</button>
<button class="large green button style-1">Download</button>
<button class="transparent-white button style-1">Previous</button>
<button class="transparent-black button style-1">Next</button>
<button class="medium dark-gray button style-1">Close</button>
<button class="large yellow button style-1">Buy now</button>
<button class="small blue button style-1">Upload</button>
<button class="medium red button style-1">Add to cart</button>
<button class="large green button style-1">Download</button>
<button class="transparent-white button style-1">Previous</button>
<button class="transparent-black button style-1">Next</button>