Forms
Link Buttons 
- Class name: (k-buttons-bar)
- Version: 1.0
Besides input tags, you may use links to perform javascript actions in a form. This option may be used with caution though, as it may not be a fully accessible choice.
To indicate that a link is to be interpreted as a form button, you must give it the "k-button" class and it must be part of a list (of ".k-buttons-bar" class).
You may combine the "k-button" class with the following other classes:
- class "optional": to secondary valid actions
- class "reset": to reset actions
Mouseover the buttons to check ":hover" styles
HTML5 Plain Code
-
<ul class="k-buttons-bar">
-
<li><a href="#" class="k-button" role="button">Confirm</a></li>
-
<li><a href="#" class="k-button optional" role="button">Optional Action</a></li>
-
<li><span class="k-disabled" role="button">Disabled</span></li>
-
<li><a href="#" class="k-button reset" role="button">Cancel</a></li>
-
</ul>
CSS Code
-
/* Buttons bar for inputs */
-
.k-buttons-bar {
-
clear: both;
-
text-align: right;
-
padding: 0;
-
margin: 0 0 20px;
-
border: none;
-
}
-
/* Buttons bar for links */
-
.k-buttons-bar li {
-
display: inline;
-
font-size: 0.95em;
-
list-style-type: none;
-
}
-
/* Valid actions - must duplicate declarations for IE6!!*/
-
input[type=button], input[type=submit] {
-
font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-
color: #FFF;
-
background: #A40800;
-
padding: 0.3em 1em;
-
margin: 0 5px 8px;
-
border: none;
-
border-radius: 3px;
-
box-shadow: 0 1px 1px rgba(0,0,0,.5);
-
cursor: pointer;
-
}
-
.k-button, a.k-button, a.k-button:link, a.k-button:visited {
-
display: inline-block;
-
font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-decoration: none;
-
text-transform: uppercase;
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-
color: #FFF;
-
background: #A40800;
-
padding: 0.4em 1.3em;
-
margin: 0 5px 8px;
-
border-radius: 3px;
-
box-shadow: 0 1px 1px rgba(0,0,0,.5);
-
cursor: pointer;
-
}
-
/*hover*/
-
input[type=button]:hover, input[type=submit]:hover, a.k-button:hover {
-
color: #FFF;
-
background: #000;
-
}
-
/*focus*/
-
input[type=button]:focus, input[type=submit]:focus, a.k-button:focus {
-
color: #FFF;
-
background: #000;
-
}
-
/* Disabled actions */
-
input[type=submit]:disabled, input[type=button]:disabled {
-
text-shadow: none;
-
color: #999;
-
background: #CCC;
-
box-shadow: none;
-
cursor: default;
-
}
-
.k-disabled {
-
display: inline-block;
-
font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
text-shadow: none;
-
color: #999;
-
background: #CCC;
-
padding: 0.4em 1.3em;
-
margin: 0 5px 8px;
-
border-radius: 3px;
-
}
-
/* Optional actions */
-
input[type=button].optional, input[type=submit].optional {
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
-
color: #FFF;
-
background: #3E3E3E;
-
}
-
a.k-button.optional, a.k-button.optional:link, a.k-button.optional:visited {
-
color: #FFF;
-
background: #3E3E3E;
-
}
-
/*hover*/
-
input[type=button].optional:hover, input[type=submit].optional:hover, a.k-button.optional:hover {
-
color: #FFF;
-
background: #000;
-
}
-
/*focus*/
-
input[type=button].optional:focus, input[type=submit].optional:focus, a.k-button.optional:focus {
-
color: #FFF;
-
background: #000;
-
}
-
/* Reset Actions */
-
input[type=button].reset, input[type=reset] {
-
font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-
color: #FFF;
-
background: #3E3E3E;
-
padding: 0.3em 1em;
-
margin: 0 5px 8px;
-
border: none;
-
border-radius: 3px;
-
box-shadow: 0 1px 1px rgba(0,0,0,.5);
-
cursor: pointer;
-
}
-
a.k-button.reset, a.k-button.reset:link, a.k-button.reset:visited {
-
color: #FFF;
-
background: #3E3E3E;
-
}
-
/* Hover/Focus */
-
input[type=button].reset:hover, input[type=reset]:hover, a.k-button.reset:hover {
-
color: #FFF;
-
background: #000;
-
}
-
input[type=button]:focus, input[type=reset]:focus, a.k-button.reset:focus {
-
color: #FFF;
-
background: #000;
-
}
Please note that the CSS code is the same for all form buttons types (validation, optional, etc.), and either for input or a tags.
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments: