LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
		Flatshadow Framework
		
     
	
	
	
		
		

Flatshadow Framework


Rectangular Buttons

Rectangular / Light

Rectangular / Dark

Rectangular / Blue

Rectangular / Purple

Rectangular / Pink

Rectangular / Red

Rectangular / Orange

Rectangular / Yellow


Rounded Buttons

Rounded / Light

Rounded / Dark

Rounded / Blue

Rounded / Purple

Rounded / Pink

Rounded / Red

Rounded / Orange

Rounded / Yellow

CSS
/* Font Face - Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Cabin+Condensed:700);
/* Variables */
/* Styles */
/* Mixins */
.hide {
  display: none;
}
.bold {
  font-weight: bold;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
/* Demo Styles */
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: 100%;
}
body {
  margin: 0;
  padding: 30px;
  border: 0px;
  background: #DADADA url('https://raw2.github.com/RomuloBastos/Flatshadow/master/img/bg-pattern.png') 0 0 repeat;
  color: #777777;
  font-family: 'Cabin Condensed', sans-serif;
}
a {
  -webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
  -webkit-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  -o-transition: 0.1s linear;
  transition: 0.1s linear;
}
hr {
  margin: 10px 0 20px 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #c9c9c9;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0px;
  border: 0px;
  line-height: 100%;
}
/* Flatshadow Styles */
.flatshadow {
  background: rgba(170, 170, 170, 0.15);
  margin: 10px 10px 0px 0px;
  padding: 20px 16px 20px 20px;
  border: 0px;
  float: left;
  /* Title */
  /* Lists */
  /* Rounded Buttons */
  /* Box Background Dark */
  /* Box Background Blue */
  /* Box Background Purple */
  /* Box Background Pink */
  /* Box Background Red */
  /* Box Background Orange */
  /* Box Background Yellow */
}
.flatshadow h1,
.flatshadow h2,
.flatshadow h3,
.flatshadow h4,
.flatshadow h5,
.flatshadow h6 {
  margin: 0 0 5px 0;
  padding: 0;
  border: 0;
  line-height: 100%;
}
.flatshadow ul {
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style: none;
}
.flatshadow ul li {
  margin: 0px;
  padding: 0px;
  border: 0px;
  display: inline-block;
  /* Active State Button */
  /* Dark Gray */
  /* Blue */
  /* Purple */
  /* Pink */
  /* Red */
  /* Orange */
  /* Yellow */
}
.flatshadow ul li a {
  background: #f1f1f1;
  margin: 0 4px 0 0px;
  padding: 10px 20px;
  border: 0;
  float: left;
  text-decoration: none;
  -webkit-box-shadow: 2px 3px 0 #b7b7b7;
  -moz-box-shadow: 2px 3px 0 #b7b7b7;
  -ms-box-shadow: 2px 3px 0 #b7b7b7;
  -o-box-shadow: 2px 3px 0 #b7b7b7;
  box-shadow: 2px 3px 0 #b7b7b7;
  color: #919191;
}
.flatshadow ul li a:hover,
.flatshadow ul li a:focus {
  background: #ffffff;
  -webkit-box-shadow: 2px 3px 0 #d0d0d0;
  -moz-box-shadow: 2px 3px 0 #d0d0d0;
  -ms-box-shadow: 2px 3px 0 #d0d0d0;
  -o-box-shadow: 2px 3px 0 #d0d0d0;
  box-shadow: 2px 3px 0 #d0d0d0;
  color: #777777;
}
.flatshadow ul li a:active {
  -webkit-transform: translate(2px, 3px);
  -moz-transform: translate(2px, 3px);
  -ms-transform: translate(2px, 3px);
  -o-transform: translate(2px, 3px);
  transform: translate(2px, 3px);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.active a {
  background: #919191;
  -webkit-box-shadow: 2px 3px 0 #777777;
  -moz-box-shadow: 2px 3px 0 #777777;
  -ms-box-shadow: 2px 3px 0 #777777;
  -o-box-shadow: 2px 3px 0 #777777;
  box-shadow: 2px 3px 0 #777777;
  color: #ffffff;
}
.flatshadow ul li.active a:hover,
.flatshadow ul li.active a:focus {
  background: #9d9d9d;
  -webkit-box-shadow: 2px 3px 0 #848484;
  -moz-box-shadow: 2px 3px 0 #848484;
  -ms-box-shadow: 2px 3px 0 #848484;
  -o-box-shadow: 2px 3px 0 #848484;
  box-shadow: 2px 3px 0 #848484;
}
.flatshadow ul li.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.dark a {
  background: #63696C;
  -webkit-box-shadow: 2px 3px 0 #3e4244;
  -moz-box-shadow: 2px 3px 0 #3e4244;
  -ms-box-shadow: 2px 3px 0 #3e4244;
  -o-box-shadow: 2px 3px 0 #3e4244;
  box-shadow: 2px 3px 0 #3e4244;
  color: #262829;
}
.flatshadow ul li.dark a:hover,
.flatshadow ul li.dark a:focus {
  background: #7c8386;
  -webkit-box-shadow: 2px 3px 0 #575c5f;
  -moz-box-shadow: 2px 3px 0 #575c5f;
  -ms-box-shadow: 2px 3px 0 #575c5f;
  -o-box-shadow: 2px 3px 0 #575c5f;
  box-shadow: 2px 3px 0 #575c5f;
  color: #3e4244;
}
.flatshadow ul li.dark a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.dark.active a {
  background: #323537;
  -webkit-box-shadow: 2px 3px 0 #000000;
  -moz-box-shadow: 2px 3px 0 #000000;
  -ms-box-shadow: 2px 3px 0 #000000;
  -o-box-shadow: 2px 3px 0 #000000;
  box-shadow: 2px 3px 0 #000000;
  color: #cbced0;
}
.flatshadow ul li.dark.active a:hover,
.flatshadow ul li.dark.active a:focus {
  background: #3e4244;
  -webkit-box-shadow: 2px 3px 0 #000000;
  -moz-box-shadow: 2px 3px 0 #000000;
  -ms-box-shadow: 2px 3px 0 #000000;
  -o-box-shadow: 2px 3px 0 #000000;
  box-shadow: 2px 3px 0 #000000;
}
.flatshadow ul li.dark.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.blue a {
  background: #77CCEE;
  -webkit-box-shadow: 2px 3px 0 #4abbe8;
  -moz-box-shadow: 2px 3px 0 #4abbe8;
  -ms-box-shadow: 2px 3px 0 #4abbe8;
  -o-box-shadow: 2px 3px 0 #4abbe8;
  box-shadow: 2px 3px 0 #4abbe8;
  color: #1788b5;
}
.flatshadow ul li.blue a:hover,
.flatshadow ul li.blue a:focus {
  background: #a4ddf4;
  -webkit-box-shadow: 2px 3px 0 #77CCEE;
  -moz-box-shadow: 2px 3px 0 #77CCEE;
  -ms-box-shadow: 2px 3px 0 #77CCEE;
  -o-box-shadow: 2px 3px 0 #77CCEE;
  box-shadow: 2px 3px 0 #77CCEE;
  color: #1788b5;
}
.flatshadow ul li.blue a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.blue.active a {
  background: #1788b5;
  -webkit-box-shadow: 2px 3px 0 #116688;
  -moz-box-shadow: 2px 3px 0 #116688;
  -ms-box-shadow: 2px 3px 0 #116688;
  -o-box-shadow: 2px 3px 0 #116688;
  box-shadow: 2px 3px 0 #116688;
  color: #e8f7fc;
}
.flatshadow ul li.blue.active a:hover,
.flatshadow ul li.blue.active a:focus {
  background: #1a99cc;
  -webkit-box-shadow: 2px 3px 0 #14779f;
  -moz-box-shadow: 2px 3px 0 #14779f;
  -ms-box-shadow: 2px 3px 0 #14779f;
  -o-box-shadow: 2px 3px 0 #14779f;
  box-shadow: 2px 3px 0 #14779f;
}
.flatshadow ul li.blue.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.purple a {
  background: #CC77EE;
  -webkit-box-shadow: 0px 3px 0 #bb4ae8;
  -moz-box-shadow: 0px 3px 0 #bb4ae8;
  -ms-box-shadow: 0px 3px 0 #bb4ae8;
  -o-box-shadow: 0px 3px 0 #bb4ae8;
  box-shadow: 0px 3px 0 #bb4ae8;
  color: #8817b5;
}
.flatshadow ul li.purple a:hover,
.flatshadow ul li.purple a:focus {
  background: #dda4f4;
  -webkit-box-shadow: 0px 3px 0 #CC77EE;
  -moz-box-shadow: 0px 3px 0 #CC77EE;
  -ms-box-shadow: 0px 3px 0 #CC77EE;
  -o-box-shadow: 0px 3px 0 #CC77EE;
  box-shadow: 0px 3px 0 #CC77EE;
  color: #8817b5;
}
.flatshadow ul li.purple a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.purple.active a {
  background: #8817b5;
  -webkit-box-shadow: 2px 3px 0 #661188;
  -moz-box-shadow: 2px 3px 0 #661188;
  -ms-box-shadow: 2px 3px 0 #661188;
  -o-box-shadow: 2px 3px 0 #661188;
  box-shadow: 2px 3px 0 #661188;
  color: #f7e8fc;
}
.flatshadow ul li.purple.active a:hover,
.flatshadow ul li.purple.active a:focus {
  background: #991acc;
  -webkit-box-shadow: 2px 3px 0 #77149f;
  -moz-box-shadow: 2px 3px 0 #77149f;
  -ms-box-shadow: 2px 3px 0 #77149f;
  -o-box-shadow: 2px 3px 0 #77149f;
  box-shadow: 2px 3px 0 #77149f;
}
.flatshadow ul li.purple.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.pink a {
  background: #EE77CC;
  -webkit-box-shadow: 2px 3px 0 #e84abb;
  -moz-box-shadow: 2px 3px 0 #e84abb;
  -ms-box-shadow: 2px 3px 0 #e84abb;
  -o-box-shadow: 2px 3px 0 #e84abb;
  box-shadow: 2px 3px 0 #e84abb;
  color: #b51788;
}
.flatshadow ul li.pink a:hover,
.flatshadow ul li.pink a:focus {
  background: #f4a4dd;
  -webkit-box-shadow: 2px 3px 0 #EE77CC;
  -moz-box-shadow: 2px 3px 0 #EE77CC;
  -ms-box-shadow: 2px 3px 0 #EE77CC;
  -o-box-shadow: 2px 3px 0 #EE77CC;
  box-shadow: 2px 3px 0 #EE77CC;
  color: #b51788;
}
.flatshadow ul li.pink a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.pink.active a {
  background: #b51788;
  -webkit-box-shadow: 2px 3px 0 #881166;
  -moz-box-shadow: 2px 3px 0 #881166;
  -ms-box-shadow: 2px 3px 0 #881166;
  -o-box-shadow: 2px 3px 0 #881166;
  box-shadow: 2px 3px 0 #881166;
  color: #fce8f7;
}
.flatshadow ul li.pink.active a:hover,
.flatshadow ul li.pink.active a:focus {
  background: #cc1a99;
  -webkit-box-shadow: 2px 3px 0 #9f1477;
  -moz-box-shadow: 2px 3px 0 #9f1477;
  -ms-box-shadow: 2px 3px 0 #9f1477;
  -o-box-shadow: 2px 3px 0 #9f1477;
  box-shadow: 2px 3px 0 #9f1477;
}
.flatshadow ul li.pink.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.red a {
  background: #EE6666;
  -webkit-box-shadow: 2px 3px 0 #e93838;
  -moz-box-shadow: 2px 3px 0 #e93838;
  -ms-box-shadow: 2px 3px 0 #e93838;
  -o-box-shadow: 2px 3px 0 #e93838;
  box-shadow: 2px 3px 0 #e93838;
  color: #a81313;
}
.flatshadow ul li.red a:hover,
.flatshadow ul li.red a:focus {
  background: #f39494;
  -webkit-box-shadow: 2px 3px 0 #EE6666;
  -moz-box-shadow: 2px 3px 0 #EE6666;
  -ms-box-shadow: 2px 3px 0 #EE6666;
  -o-box-shadow: 2px 3px 0 #EE6666;
  box-shadow: 2px 3px 0 #EE6666;
  color: #a81313;
}
.flatshadow ul li.red a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.red.active a {
  background: #bf1515;
  -webkit-box-shadow: 2px 3px 0 #911010;
  -moz-box-shadow: 2px 3px 0 #911010;
  -ms-box-shadow: 2px 3px 0 #911010;
  -o-box-shadow: 2px 3px 0 #911010;
  box-shadow: 2px 3px 0 #911010;
  color: #fbd9d9;
}
.flatshadow ul li.red.active a:hover,
.flatshadow ul li.red.active a:focus {
  background: #d61818;
  -webkit-box-shadow: 2px 3px 0 #a81313;
  -moz-box-shadow: 2px 3px 0 #a81313;
  -ms-box-shadow: 2px 3px 0 #a81313;
  -o-box-shadow: 2px 3px 0 #a81313;
  box-shadow: 2px 3px 0 #a81313;
}
.flatshadow ul li.red.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.orange a {
  background: #FF8844;
  -webkit-box-shadow: 2px 3px 0 #ff6811;
  -moz-box-shadow: 2px 3px 0 #ff6811;
  -ms-box-shadow: 2px 3px 0 #ff6811;
  -o-box-shadow: 2px 3px 0 #ff6811;
  box-shadow: 2px 3px 0 #ff6811;
  color: #aa3e00;
}
.flatshadow ul li.orange a:hover,
.flatshadow ul li.orange a:focus {
  background: #ffa877;
  -webkit-box-shadow: 2px 3px 0 #FF8844;
  -moz-box-shadow: 2px 3px 0 #FF8844;
  -ms-box-shadow: 2px 3px 0 #FF8844;
  -o-box-shadow: 2px 3px 0 #FF8844;
  box-shadow: 2px 3px 0 #FF8844;
  color: #aa3e00;
}
.flatshadow ul li.orange a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.orange.active a {
  background: #dd5000;
  -webkit-box-shadow: 2px 3px 0 #aa3e00;
  -moz-box-shadow: 2px 3px 0 #aa3e00;
  -ms-box-shadow: 2px 3px 0 #aa3e00;
  -o-box-shadow: 2px 3px 0 #aa3e00;
  box-shadow: 2px 3px 0 #aa3e00;
  color: #ffd9c3;
}
.flatshadow ul li.orange.active a:hover,
.flatshadow ul li.orange.active a:focus {
  background: #f65a00;
  -webkit-box-shadow: 2px 3px 0 #c34700;
  -moz-box-shadow: 2px 3px 0 #c34700;
  -ms-box-shadow: 2px 3px 0 #c34700;
  -o-box-shadow: 2px 3px 0 #c34700;
  box-shadow: 2px 3px 0 #c34700;
}
.flatshadow ul li.orange.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.yellow a {
  background: #FFCC66;
  -webkit-box-shadow: 2px 3px 0 #ffbb33;
  -moz-box-shadow: 2px 3px 0 #ffbb33;
  -ms-box-shadow: 2px 3px 0 #ffbb33;
  -o-box-shadow: 2px 3px 0 #ffbb33;
  box-shadow: 2px 3px 0 #ffbb33;
  color: #cc8800;
}
.flatshadow ul li.yellow a:hover,
.flatshadow ul li.yellow a:focus {
  background: #ffdd99;
  -webkit-box-shadow: 2px 3px 0 #FFCC66;
  -moz-box-shadow: 2px 3px 0 #FFCC66;
  -ms-box-shadow: 2px 3px 0 #FFCC66;
  -o-box-shadow: 2px 3px 0 #FFCC66;
  box-shadow: 2px 3px 0 #FFCC66;
  color: #cc8800;
}
.flatshadow ul li.yellow a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow ul li.yellow.active a {
  background: #ffaa00;
  -webkit-box-shadow: 2px 3px 0 #cc8800;
  -moz-box-shadow: 2px 3px 0 #cc8800;
  -ms-box-shadow: 2px 3px 0 #cc8800;
  -o-box-shadow: 2px 3px 0 #cc8800;
  box-shadow: 2px 3px 0 #cc8800;
  color: #ffeecc;
}
.flatshadow ul li.yellow.active a:hover,
.flatshadow ul li.yellow.active a:focus {
  background: #ffb219;
  -webkit-box-shadow: 2px 3px 0 #e59900;
  -moz-box-shadow: 2px 3px 0 #e59900;
  -ms-box-shadow: 2px 3px 0 #e59900;
  -o-box-shadow: 2px 3px 0 #e59900;
  box-shadow: 2px 3px 0 #e59900;
}
.flatshadow ul li.yellow.active a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.flatshadow.rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
.flatshadow.rounded ul li a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.flatshadow.dark {
  background: rgba(99, 105, 108, 0.15);
}
.flatshadow.dark h1,
.flatshadow.dark h2,
.flatshadow.dark h3,
.flatshadow.dark h4,
.flatshadow.dark h5,
.flatshadow.dark h6 {
  color: #4b4f51;
}
.flatshadow.blue {
  background: rgba(119, 204, 238, 0.15);
}
.flatshadow.blue h1,
.flatshadow.blue h2,
.flatshadow.blue h3,
.flatshadow.blue h4,
.flatshadow.blue h5,
.flatshadow.blue h6 {
  color: #1788b5;
}
.flatshadow.purple {
  background: rgba(204, 119, 238, 0.15);
}
.flatshadow.purple h1,
.flatshadow.purple h2,
.flatshadow.purple h3,
.flatshadow.purple h4,
.flatshadow.purple h5,
.flatshadow.purple h6 {
  color: #aa1ce3;
}
.flatshadow.pink {
  background: rgba(238, 119, 204, 0.15);
}
.flatshadow.pink h1,
.flatshadow.pink h2,
.flatshadow.pink h3,
.flatshadow.pink h4,
.flatshadow.pink h5,
.flatshadow.pink h6 {
  color: #e31caa;
}
.flatshadow.red {
  background: rgba(238, 102, 102, 0.15);
}
.flatshadow.red h1,
.flatshadow.red h2,
.flatshadow.red h3,
.flatshadow.red h4,
.flatshadow.red h5,
.flatshadow.red h6 {
  color: #e93838;
}
.flatshadow.orange {
  background: rgba(255, 136, 68, 0.15);
}
.flatshadow.orange h1,
.flatshadow.orange h2,
.flatshadow.orange h3,
.flatshadow.orange h4,
.flatshadow.orange h5,
.flatshadow.orange h6 {
  color: #ff6811;
}
.flatshadow.yellow {
  background: rgba(255, 179, 25, 0.15);
}
.flatshadow.yellow h1,
.flatshadow.yellow h2,
.flatshadow.yellow h3,
.flatshadow.yellow h4,
.flatshadow.yellow h5,
.flatshadow.yellow h6 {
  color: #e59900;
}
.clear {
  clear: both;
  padding: 15px 0;
}
.right {
  float: right;
}
.left {
  float: left;
}
.nospaces {
  margin: 0;
  padding: 0;
  border: 0px;
}
JS
/*
Flatshadow
==================================================

Flatshadow is a CSS framework using LESS code.
Author: Rômulo Bastos / Ararazu
http://themeforest.net/user/Ararazu?ref=ararazu

--------------------------------------------------
Download Page:
https://github.com/RomuloBastos/Flatshadow/

--------------------------------------------------
Demo Page:
https://romulobastos.github.io/Flatshadow/

--------------------------------------------------
View on Codepen:
https://codepen.io/romulobastos/pen/xAmcv


Thank you for visit!

*/

Description

~ English: Flatshadow is based on a concept of realistic buttons. Besides being beautiful, Flatshadow is simple to be implemented.
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv