KAWWA Markup Pattern Library


Forms

Link Buttons Component Information

  • Class name: (k-buttons-bar)
  • Version: 1.0

Add to list

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

COPY
  1. <ul class="k-buttons-bar">
  2. 	<li><a href="#" class="k-button" role="button">Confirm</a></li>
  3. 	<li><a href="#" class="k-button optional" role="button">Optional Action</a></li>
  4. 	<li><span class="k-disabled" role="button">Disabled</span></li>
  5. 	<li><a href="#" class="k-button reset" role="button">Cancel</a></li>
  6. </ul>

CSS Code

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

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