KAWWA Markup Pattern Library


Forms

Input Buttons Component Information

  • Class name:
  • Version: 1.0

Add to list

Form actions may be performed by an input tag of one of the following types:

  • type "submit"
  • type "reset"
  • type "button"

Optional actions (positive actions other than the main validation action) are indicated by giving to the "submit" or "button" input tags the "optional" class.

You may choose to structure all input buttons in a specific container. The class ".k-buttons-bar" allows you to design a fieldset or a div to correctly position the group of buttons in your form.

Mouseover the buttons to check ":hover" styles

HTML5 Plain Code

COPY
  1. <!-- Attention: Input buttons make sense inside a form tag! -->
  2. <div class="k-buttons-bar">
  3. 	<p><input type="submit" value="Confirm" /> 
  4. 		<input type="submit" class="optional" value="Optional Action" />
  5. 		<input type="submit" disabled="disabled" value="Disabled" />
  6. 		<input type="reset" value="Cancel" /></p>
  7. 	<!-- IF TYPE "button" 
  8. 	<p><input type="button" value="Confirm" /> 
  9. 		<input type="button" class="optional" value="Optional Action" />
  10. 		<input type="button" disabled="disabled" value="Disabled" />
  11. 		<input type="button" class="reset" value="Cancel" /></p>-->
  12. </div>

CSS Code

COPY
  1. /* CB/ linkButtons */
  2. 
                                
  3. /* Buttons bar for inputs */
  4. .k-buttons-bar {
  5.     clear: both;
  6.     text-align: right;
  7.     padding: 0;
  8.     margin: 0 0 20px;
  9.     border: none;
  10. }
  11. 
                                
  12. 	/* Buttons bar for links */
  13. 	.k-buttons-bar li {
  14. 		display: inline;
  15. 		font-size: 0.95em;
  16. 		list-style-type: none;
  17. 	}
  18. 
                                
  19. /* Valid actions - must duplicate declarations for IE6!!*/
  20. input[type=button], input[type=submit] {
  21. 	font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  22. 	text-transform: uppercase;
  23. 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  24. 	color: #FFF;
  25. 	background: #A40800;
  26. 	padding: 0.3em 1em;
  27. 	margin: 0 5px 8px;
  28. 	border: none;
  29. 	border-radius: 3px;
  30. 	box-shadow: 0 1px 1px rgba(0,0,0,.5);
  31. 	cursor: pointer;
  32. }
  33. .k-button, a.k-button, a.k-button:link, a.k-button:visited {
  34. 	display: inline-block;
  35. 	font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  36. 	text-decoration: none;
  37. 	text-transform: uppercase;
  38. 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  39. 	color: #FFF;
  40. 	background: #A40800;
  41. 	padding: 0.4em 1.3em;
  42. 	margin: 0 5px 8px;
  43. 	border-radius: 3px;
  44. 	box-shadow: 0 1px 1px rgba(0,0,0,.5);
  45. 	cursor: pointer;
  46. }
  47. 	/*hover*/
  48. 	input[type=button]:hover, input[type=submit]:hover, a.k-button:hover {
  49. 		color: #FFF;
  50. 		background: #000;
  51. 	}
  52. 	/*focus*/
  53. 	input[type=button]:focus, input[type=submit]:focus, a.k-button:focus {
  54. 		color: #FFF;
  55. 		background: #000;
  56. 	}
  57. 
                                
  58. /* Disabled actions */
  59. 
                                
  60. 	input[type=submit]:disabled, input[type=button]:disabled {
  61. 		text-shadow: none;
  62. 		color: #999;
  63. 		background: #CCC;
  64. 		box-shadow: none;
  65. 		cursor: default;
  66. 	}
  67. 	.k-disabled {
  68. 		display: inline-block;
  69. 		font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  70. 		text-transform: uppercase;
  71. 		text-shadow: none;
  72. 		color: #999;
  73. 		background: #CCC;
  74. 		padding: 0.4em 1.3em;
  75. 		margin: 0 5px 8px;
  76. 		border-radius: 3px;
  77. 	}
  78. 
                                
  79. /* Optional actions */
  80. input[type=button].optional, input[type=submit].optional {
  81. 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  82. 	color: #FFF;
  83. 	background: #3E3E3E;
  84. }
  85. a.k-button.optional, a.k-button.optional:link, a.k-button.optional:visited {
  86. 	color: #FFF;
  87. 	background: #3E3E3E;
  88. }
  89. 	/*hover*/
  90. 	input[type=button].optional:hover, input[type=submit].optional:hover, a.k-button.optional:hover {
  91. 		color: #FFF;
  92. 		background: #000;
  93. 	}
  94. 	/*focus*/
  95. 	input[type=button].optional:focus, input[type=submit].optional:focus, a.k-button.optional:focus {
  96. 		color: #FFF;
  97. 		background: #000;
  98. 	}
  99. 
                                
  100. /* Reset Actions */
  101. input[type=button].reset, input[type=reset] {
  102. 	font: 100% open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  103. 	text-transform: uppercase;
  104. 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  105. 	color: #FFF;
  106. 	background: #3E3E3E;
  107. 	padding: 0.3em 1em;
  108. 	margin: 0 5px 8px;
  109. 	border: none;
  110. 	border-radius: 3px;
  111. 	box-shadow: 0 1px 1px rgba(0,0,0,.5);
  112. 	cursor: pointer;
  113. }
  114. a.k-button.reset, a.k-button.reset:link, a.k-button.reset:visited {
  115. 	color: #FFF;
  116. 	background: #3E3E3E;
  117. }
  118. 
                                
  119. 	/* Hover/Focus */
  120. 	input[type=button].reset:hover, input[type=reset]:hover, a.k-button.reset:hover {
  121. 		color: #FFF;
  122. 		background: #000;
  123. 	}
  124. 	input[type=button]:focus, input[type=reset]:focus, a.k-button.reset:focus {
  125. 		color: #FFF;
  126. 		background: #000;
  127. 	}
  128. 
                                
  129. 
                                
  130. /* CE/ linkButtons */

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce