octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

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

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;
 }

}

            
          
!

JS

            
              $('.windows, .osx').click(function() {
  alert('hello');
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console