CodePen

HTML

            
              <form action="">
<input type="submit" value="Go" class="windows">
<input type="submit" value="OK" class="osx">
</form>
            
          
!
via HTML Inspector

CSS

            
              input[type="submit"].osx {
  background: #fff;
  border: 1px solid #959595;
	border-radius: 4px;
	padding: 1px 20px;
    background: -moz-linear-gradient(top, #fff 0%, #fff 50%, #ededed 51%, #ededed 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#fff), color-stop(51%,#ededed), color-stop(100%,#ededed));
	background: -webkit-linear-gradient(top, #fff 0%,#fff 50%,#ededed 51%,#ededed 100%);
	background: -o-linear-gradient(top, #fff 0%,#fff 50%,#ededed 51%,#ededed 100%);
	background: linear-gradient(to bottom, #fff 0%,#fff 50%,#ededed 51%,#ededed 100%);

	-webkit-box-shadow: inset 0 0 0 1px #fff;
		    box-shadow: inset 0 0 0 1px #fff;
}

input[type="submit"].osx:hover {
	background: #e1f3fc;
	background: -moz-linear-gradient(top, #cee4f9 0%, #9dcbf2 50%, #81bff2 51%, #ccf1fa 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cee4f9), color-stop(50%,#9dcbf2), color-stop(51%,#81bff2), color-stop(100%,#ccf1fa));
	background: -webkit-linear-gradient(top, #cee4f9 0%,#9dcbf2 50%,#81bff2 51%,#ccf1fa 100%);
	background: -o-linear-gradient(top, #cee4f9 0%,#9dcbf2 50%,#81bff2 51%,#ccf1fa 100%);
	background: -ms-linear-gradient(top, #cee4f9 0%,#9dcbf2 50%,#81bff2 51%,#ccf1fa 100%);
	background: linear-gradient(to bottom, #cee4f9 0%,#9dcbf2 50%,#81bff2 51%,#ccf1fa 100%);
	border: 1px solid #5056a7;

	-webkit-box-shadow: inset 0 0 0 1px #bcd6ed;
		    box-shadow: inset 0 0 0 1px #bcd6ed;
}

input[type="submit"].osx:focus,
input[type="submit"].osx:active{
    -webkit-box-shadow:  0 0 5px 2px #6ea7d6;
		    box-shadow:  0 0 5px 2px #6ea7d6;
}

input[type="submit"].windows {
	background: #efefef;
	border: 1px solid #707070;
	border-radius: 4px;
  outline: none;
	padding: 3px 20px;
    background: -moz-linear-gradient(top, #efefef 0%, #efefef 50%, #d6d6d6 51%, #d6d6d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#efefef), color-stop(51%,#d6d6d6), color-stop(100%,#d6d6d6));
	background: -webkit-linear-gradient(top, #efefef 0%,#efefef 50%,#d6d6d6 51%,#d6d6d6 100%);
	background: -o-linear-gradient(top, #efefef 0%,#efefef 50%,#d6d6d6 51%,#d6d6d6 100%);
	background: linear-gradient(to bottom, #efefef 0%,#efefef 50%,#d6d6d6 51%,#d6d6d6 100%);

	-webkit-box-shadow: inset 0 0 0 1px #fff;
		    box-shadow: inset 0 0 0 1px #fff;

		-webkit-transition: 1s all ease;
		   -moz-transition: 1s all ease;
		     -o-transition: 1s all ease;
		        transition: 1s all ease;
}

input[type="submit"].windows:hover {
	background: #e1f3fc;
	background: -moz-linear-gradient(top, #e1f3fc 0%, #e1f3fc 50%, #b5e2fa 51%, #b5e2fa 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1f3fc), color-stop(50%,#e1f3fc), color-stop(51%,#b5e2fa), color-stop(100%,#b5e2fa));
	background: -webkit-linear-gradient(top, #e1f3fc 0%,#e1f3fc 50%,#b5e2fa 51%,#b5e2fa 100%);
	background: -o-linear-gradient(top, #e1f3fc 0%,#e1f3fc 50%,#b5e2fa 51%,#b5e2fa 100%);
	background: -ms-linear-gradient(top, #e1f3fc 0%,#e1f3fc 50%,#b5e2fa 51%,#b5e2fa 100%);
	background: linear-gradient(to bottom, #e1f3fc 0%,#e1f3fc 50%,#b5e2fa 51%,#b5e2fa 100%);
	border: 1px solid #3c7fb1;
}

input[type="submit"].windows:focus {
	background: #ecf4f7;
	background: -moz-linear-gradient(top, #ecf4f7 0%, #ecf4f7 50%, #c3ddea 51%, #c3ddea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ecf4f7), color-stop(50%,#ecf4f7), color-stop(51%,#c3ddea), color-stop(100%,#c3ddea));
	background: -webkit-linear-gradient(top, #ecf4f7 0%,#ecf4f7 50%,#c3ddea 51%,#c3ddea 100%);
	background: -o-linear-gradient(top, #ecf4f7 0%,#ecf4f7 50%,#c3ddea 51%,#c3ddea 100%);
	background: -ms-linear-gradient(top, #ecf4f7 0%,#ecf4f7 50%,#c3ddea 51%,#c3ddea 100%);
	background: linear-gradient(to bottom, #ecf4f7 0%,#ecf4f7 50%,#c3ddea 51%,#c3ddea 100%);
	-webkit-box-shadow: inset 0 0 0 1px #37d4fd;
	box-shadow: inset 0 0 0 1px #37d4fd;
	border: 1px solid #3c7fb1;
	-webkit-animation: glow 2s infinite;
	-moz-animation: glow 2s infinite;
	-ms-animation: glow 2s infinite;
	-o-animation: glow 2s infinite;
	animation: glow 2s infinite;
}

@keyframes "glow" {
 from {
    -webkit-box-shadow: inset 0 0 0 1px #37d4fd;
   	box-shadow: inset 0 0 0 1px #37d4fd;
 }
 50% {
    -webkit-box-shadow: inset 0 0 2px 1px #37d4fd;
   	box-shadow: inset 0 0 2px 1px #37d4fd;
 }

}

@-moz-keyframes glow {
 from {
   box-shadow: inset 0 0 0 1px #37d4fd;
 }
 50% {
   box-shadow: inset 0 0 2px 1px #37d4fd;
 }

}

@-webkit-keyframes "glow" {
 from {
   -webkit-box-shadow: inset 0 0 0 1px #37d4fd;
   box-shadow: inset 0 0 0 1px #37d4fd;
 }
 50% {
   -webkit-box-shadow: inset 0 0 2px 1px #37d4fd;
   box-shadow: inset 0 0 2px 1px #37d4fd;
 }

}

@-ms-keyframes "glow" {
 from {
   box-shadow: inset 0 0 0 1px #37d4fd;
 }
 50% {
   box-shadow: inset 0 0 2px 1px #37d4fd;
 }

}

@-o-keyframes "glow" {
 from {
   box-shadow: inset 0 0 0 1px #37d4fd;
 }
 50% {
   box-shadow: inset 0 0 2px 1px #37d4fd;
 }

}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.windows, .osx').click(function() {
  alert('hello');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................