<div id='wrapper'>
    	<form>
				<h1>Soft Ui</h1>
				<fieldset>
					<a href='#'>Button</a>
					<a href='#' class='hover'>Hovered</a>
					<a href='#' class='active'>Active</a>
				</fieldset>
				<fieldset>
					<input id='radio_1-1' type='checkbox' checked='checked'>
					<label for='radio_1-1'></label>
					<input id='radio_1-2' type='checkbox'>
					<label for='radio_1-2'></label>
					<input id='radio_1-3' type='checkbox'>
					<label for='radio_1-3'></label>
				</fieldset>
				<fieldset>
					<input id='radio_2-1' type='radio' name='radio' checked='checked'>
					<label for='radio_2-1'></label>
					<input id='radio_2-2' type='radio' name='radio'>
					<label for='radio_2-2'></label>
					<input id='radio_2-3' type='radio' name='radio'>
					<label for='radio_2-3'></label>
				</fieldset>
				<fieldset class='toggles'>
					<input id='check_2-1' type='checkbox' checked='checked'>
					<label for='check_2-1'></label>
					<input id='check_2-2' type='checkbox'>
					<label for='check_2-2'></label>
					<input id='check_2-3' type='checkbox'>
					<label for='check_2-3'></label>
				</fieldset>
				<fieldset>
					<input type='range' value='0'>
				</fieldset>
			</form>
		</div>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

body {
  background: url("http://www.vancouverad.com/bgimg/img/white_carbon.png") repeat;
}

#wrapper {
  width: 450px;
  margin: 0 auto 0 auto;
}
#wrapper h1 {
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #478491;
  margin-top: 15px;
  line-height:1.5;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

form:after {
  content: '';
  line-height: 0;
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

fieldset {
  border: 0;
  margin: 15px 25px 15px 0;
  float: left;
}

/* -------------------
  Button Styles
-------------------- */
a {
  border: none;
  text-decoration:none;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0 8px 0 0;
  padding: 10px 40px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dedede));
  background-image: -webkit-linear-gradient(#f9f9f9, #dedede);
  background-image: -moz-linear-gradient(#f9f9f9, #dedede);
  background-image: -o-linear-gradient(#f9f9f9, #dedede);
  background-image: linear-gradient(#f9f9f9, #dedede);
  -webkit-box-shadow: inset 0px 1px 0 white, 0 1px 0 rgba(0, 0, 0, 0.3), 0px 3px 4px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: inset 0px 1px 0 white, 0 1px 0 rgba(0, 0, 0, 0.3), 0px 3px 4px rgba(0, 0, 0, 0.14);
  box-shadow: inset 0px 1px 0 white, 0 1px 0 rgba(0, 0, 0, 0.3), 0px 3px 4px rgba(0, 0, 0, 0.14);
  color: #91b8c0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: bold;
}

a:hover, .hover {
  cursor: pointer;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f5f7), color-stop(100%, #dae2e3));
  background-image: -webkit-linear-gradient(#f2f5f7, #dae2e3);
  background-image: -moz-linear-gradient(#f2f5f7, #dae2e3);
  background-image: -o-linear-gradient(#f2f5f7, #dae2e3);
  background-image: linear-gradient(#f2f5f7, #dae2e3);
}

a:active, .active, .active:hover {
  border: none;
  color: #478491;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bccbd4), color-stop(100%, #cce4eb));
  background-image: -webkit-linear-gradient(#bccbd4, #cce4eb);
  background-image: -moz-linear-gradient(#bccbd4, #cce4eb);
  background-image: -o-linear-gradient(#bccbd4, #cce4eb);
  background-image: linear-gradient(#bccbd4, #cce4eb);
  -webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3), inset 0px 0px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3), inset 0px 0px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3), inset 0px 0px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* -------------------
  Check Styles
-------------------- */
input[type='checkbox'], input[type='radio'] {
  display: none;
}

input[type='checkbox'] + label, input[type='radio'] + label {
  display: block;
  float: left;
  margin: 0 8px 0 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: red;
  width: 20px;
  height: 20px;
  background: #dcdfe0;
  -webkit-box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
}

input[type='checkbox']:checked + label {
  background: #dcdfe0 url("http://www.bradysammons.com/codepen/softui/check.png");
  background-repeat: no-repeat;
  background-position: 3px center;
}

/* -------------------
  Radios
-------------------- */

input[type='radio'] + label {
  border-radius: 30px;
  position: relative;
}

input[type='radio']:checked + label:after {
  content: '';
  width: 8px;
  height: 8px;
  display: block;
  background: #478491;
  position: absolute;
  left: 6px;
  top: 6px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* -------------------
  toggles
-------------------- */
.toggles input[type='checkbox'] + label {
  width: 40px;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.toggles input[type='checkbox'] + label:after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: red;
  position: absolute;
  margin-left: 1px;
  top: 0px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dedede));
  background-image: -webkit-linear-gradient(#f9f9f9, #dedede);
  background-image: -moz-linear-gradient(#f9f9f9, #dedede);
  background-image: -o-linear-gradient(#f9f9f9, #dedede);
  background-image: linear-gradient(#f9f9f9, #dedede);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.2);
}

.toggles input[type='checkbox']:checked + label {
  background: #b9d2d9;
}

.toggles input[type='checkbox']:checked + label:after {
  margin-left: 20px;
}

/* -------------------
	Range Slider
-------------------- */
input[type='range'] {
  height: 10px;
  width: 410px;
  -webkit-appearance: none;
  background: #dcdfe0;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 0 white, inset 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 white, inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

input::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  display: block;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dedede));
  background-image: -webkit-linear-gradient(#f9f9f9, #dedede);
  background-image: -moz-linear-gradient(#f9f9f9, #dedede);
  background-image: -o-linear-gradient(#f9f9f9, #dedede);
  background-image: linear-gradient(#f9f9f9, #dedede);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 3px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

input::-webkit-slider-thumb:active {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f5f7), color-stop(100%, #dae2e3));
  background-image: -webkit-linear-gradient(#f2f5f7, #dae2e3);
  background-image: -moz-linear-gradient(#f2f5f7, #dae2e3);
  background-image: -o-linear-gradient(#f2f5f7, #dae2e3);
  background-image: linear-gradient(#f2f5f7, #dae2e3);
}
/*----------------------

Works in Webkit Browsers, Firefox, Opera, havent tested IE :)
Inspired by Cameron Baney

----------------------*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.