Buttons

buttons.markdown

Buttons

A Pen by Saijo George on CodePen.

License.

index.html

<div class="hot"><p class="center">Hot</p></div>
<div class="cloudy"><p class="center">Cloudy</p></div>
<div class="breezy"><p class="center">Breezy</p></div>
<div class="night"><p class="center">Night</p></div>
<div class="stormy"><p class="center">Stormy</p></div>

style.css

@import url('https://fonts.googleapis.com/css?family=Play');
  
body    { background: #F6F5F3; }
div     { width: 200px; height: 64px; border-radius: 6px; }

.hot    { position: absolute; top:25%; left:5%;
	        background:linear-gradient( to top right, rgba(255,87,34,1) 0%, rgba(251,140,0 ,1) 100%);
	        box-shadow: 1px 1px 30px rgba(255,111,0 ,1); }

.cloudy { position: absolute; top:25%; left:20%;
	        background:linear-gradient( to top right, rgba(63,81,181,1) 0%, rgba(3,155,229 ,1) 40%);
	        box-shadow: 1px 1px 30px rgba(2,119,189 ,1); }

.breezy { position: absolute; top:25%; left:35%;
	        background:linear-gradient( to top right,rgba(156,204,101 ,1) 0%, rgba(38,198,218 ,1) 50%);
	        box-shadow: 1px 1px 30px rgba(38,198,218 ,1);}

.night  { position: absolute; top:25%; left:50%;
	        background:linear-gradient( to bottom right,rgba(63,81,181,1) 0%, rgba(171,71,188 ,1) 70%);
	        box-shadow: 1px 1px 30px rgba(81,45,168 ,1);}

.stormy { position: absolute; top:25%; left:65%;
	        background:linear-gradient( to top right,rgba(117,117,117 ,1) 0%, rgba(33,33,33 ,1) 90%);
	        box-shadow: 1px 1px 30px rgba(33,33,33 ,1); }

.center {text-align: center; color: #fff; margin: 18px; font-size: 25px; font-family: 'Play', sans-serif;}

This Pen is a fork of Dzen's Pen Buttons.