[ KAWWA PORTAL ] Components : Link Buttons

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

Demo
Snippets

HTML5 Plain Code

COPY

```
<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

COPY

```
/* 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:

Top

KAWWA Markup Pattern Library

Forms

Link Buttons

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce