A Pen by Rômulo Bastos.

Flatshadow---3D-Buttons.markdown

Flatshadow - 3D Buttons

~ English: Flatshadow is based on a concept of realistic buttons. Besides being beautiful, Flatshadow is simple to be implemented. It comes with separated CSS classes and well organized and can be easily customized for your project. Enjoy!

~ Portuguese: Flatshadow é baseado em um conceito de botões realísticos. Além de ser bonito, o Flatshadow é simples de ser implementado. Ele já vem com classes separadas e bem organizadas, podendo ser fácilmente personalizado para o seu projeto. Aproveite!

A Pen by Rômulo Bastos on CodePen.

License.

index.html

<!-- Rounded Crners -->
<h1>Flatshadow - 3D Buttons | Rounded Corners</h1>
<h2>Hover, Focus & Active Effects</h2>
<div class="flatshadow rounded">
  <ul>
    <li class="active"><a href="#">ACTIVE</a></li>
    <li><a href="#">BUTTON</a></li>
    <li><a href="#">BUTTON</a></li>
  </ul>
</div>
<div style="clear:both"></div>
<hr />

<!-- Straight Corners -->
<h1>Flatshadow - 3D Buttons | Straight Corners</h1>
<h2>Hover, Focus & Active Effects</h2>
<div class="flatshadow">
  <ul>
    <li class="active"><a href="#">ACTIVE</a></li>
    <li><a href="#">BUTTON</a></li>
    <li><a href="#">BUTTON</a></li>
  </ul>
</div>
<div style="clear:both"></div>
<hr />

<!-- Without Styles -->
<h1>Without Styles</h1>
<div>
  <ul>
    <li class="active"><a href="#">ACTIVE</a></li>
    <li><a href="#">BUTTON</a></li>
    <li><a href="#">BUTTON</a></li>
  </ul>
</div>

script.js

/*
----------------------------------------------------
  Flatshadow - 3D Buttons
----------------------------------------------------

  Author: Rômulo Bastos / Ararazu
  http://themeforest.net/user/Ararazu?ref=ararazu

----------------------------------------------------
*/

style.css

/* Font Face - Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:700);

/* Demo Styles */
body { background: #CCD3DD url('http://subtlepatterns.com/patterns/brushed.png') repeat; font-family: 'Cabin Condensed', sans-serif; margin: 0px; padding: 30px; }
a { -webkit-transition: 0.1s linear; transition: 0.1s linear; }
hr { border:0; border-bottom: 1px solid #99AABB; margin-bottom: 30px; }
h1 { color: #6688AA; font-size: 1.8em; margin: 0px 0px 0px 0px; }
h2 { color: #778899; font-size: 1.1em; margin: 0px; }

/* Flatshadow Styles */
.flatshadow { margin: 0px 0px 0px 0px; padding: 30px 0px; }
.flatshadow ul { list-style: none; margin: 0; padding: 0; }
.flatshadow ul li { margin: 0; display: inline-block; }
.flatshadow ul li a {
  float: left;
	background: #F6F6F6;
	margin: 0px 0px 0px 4px;
	padding: 10px 20px;
	border: 0px;
  -webkit-box-shadow: 0px 2px 0px #dddddd, 0px 2px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 0px #dddddd, 0px 2px 4px rgba(0, 0, 0, 0.2);
	color: #7799bb;
	text-decoration: none;
}
/* Hover & Focus Styles */
.flatshadow ul li a:hover,
.flatshadow ul li a:focus {
	background: #FFFFFF;
	color: #7799bb;
  outline: none;
}
/* Transition (Press Button) */
.flatshadow ul li a:active {
	-webkit-transform: translate(0, 2px);
	-ms-transform: translate(0, 2px);
	transform: translate(0, 2px);
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Active State Button */
.flatshadow ul li.active a {
	background: #6c8fb5;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6c8fb5), color-stop(100%, #82a3c2));
	background: -webkit-linear-gradient(top, #6c8fb5 0%, #82a3c2 100%);
	background: -webkit-gradient(linear, top left, bottom left, from(#6c8fb5), to(#82a3c2));
	background: linear-gradient(to bottom, #6c8fb5 0%, #82a3c2 100%);
	color: #DDEEFF;
	-webkit-box-shadow: 0px 2px 0px #557898, 0px 2px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 0px #557898, 0px 2px 4px rgba(0, 0, 0, 0.2);
}
/* Active State Button - Hover & Focus Styles */
.flatshadow ul li.active a:hover,
.flatshadow ul li.active a:focus {
  color: #FFFFFF;
}
/* Active State Button - Transition (Press Button) */
.flatshadow ul li.active a:active {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Rounded Corners */
.rounded ul li a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}