Created
September 1, 2013 02:33
-
-
Save maggiben/6401938 to your computer and use it in GitHub Desktop.
A Pen by Benjamin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="button-group"> | |
<button class="hover">Hover</button> | |
<button class="pressed">Pressed</button> | |
<button class="active">Active</button> | |
<button>Button</button> | |
</div> | |
<div class="middle frame"> | |
<img src="http://lorempixel.com/250/120/people" /> | |
</div> | |
<div class="middle"> | |
<div class="nav"> | |
<button class="arrow-l"><i class="icon-chevron-left"></i></button> | |
<button class="hover">1</button> | |
<button class="active">2</button> | |
<button class="pressed">3</button> | |
<button class="gallery">4</button> | |
<button class="gallery">5</button> | |
<button class="gallery">6</button> | |
<button class="gallery">7</button> | |
<button class="gallery"><i class="icon-th-large"></i></button> | |
<button class="arrow-r"><i class="icon-chevron-right"></i></button> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-image: url(http://subtlepatterns.com/patterns/low_contrast_linen_@2X.png); | |
background-size: 256px; | |
background-color: #252525; | |
} | |
.middle { | |
position: relative; | |
padding: 5px; | |
display: table; | |
margin: 0 auto; | |
} | |
.frame { | |
width: 250px; | |
height: 120px; | |
border: 1px solid black; | |
border-radius: 3px; | |
background-color: rgba(0,0,0,0.35); | |
margin-top: 10px; | |
padding: 4px; | |
img { | |
min-width: 100%; | |
min-height: 100%; | |
} | |
} | |
.nav { | |
position: relative; | |
background-color: rgba(0,0,0,0.35); | |
border-radius: 50px; | |
border: 1px solid #131315; | |
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.5); | |
padding-right: 2px; | |
display: inline-block; | |
margin: 0 auto; | |
padding: 2px; | |
button { | |
line-height: 20px; | |
border: 1px solid black; | |
margin: 0px; | |
float:left; | |
height: 26px; | |
width: 26px; | |
color: #000; | |
font-weight: bold; | |
text-transform: uppercase; | |
text-shadow: 0px 0px 2px rgba(255,255,255,0.45); | |
background-image: linear-gradient(to bottom, #3a3b40, #313237 100%); | |
border-right: none; | |
box-shadow: inset 0px 0px 2px rgba(255,255,255,0.2); | |
&:hover { | |
background-image: linear-gradient(to bottom, #6a6b70, #505156 100%); | |
color: #FFF; | |
box-shadow: inset 0px 0px 2px rgba(255,255,255,0.5); | |
text-shadow: 0px 0px 2px rgba(0,0,0,1); | |
} | |
&.active { | |
background-image: linear-gradient(to bottom, rgba(246, 107, 68, 1), rgba(194, 67, 35, 1) 100%); | |
color: #FFF; | |
box-shadow: inset 0px 0px 2px rgba(255,255,255,0.5); | |
text-shadow: 0px 0px 2px rgba(0,0,0,1); | |
} | |
&.pressed { | |
background-image: -webkit-radial-gradient(center, ellipse cover, #333439 0%, #252429 100%); | |
} | |
} | |
button:nth-of-type(1) { | |
border-top-left-radius: 50%; | |
border-bottom-left-radius: 50%; | |
} | |
button:nth-last-of-type(1) { | |
border-right: 1px solid black; | |
border-top-right-radius: 50%; | |
border-bottom-right-radius: 50%; | |
} | |
} | |
.button-group { | |
position: relative; | |
background-color: rgba(0,0,0,0.35); | |
padding: 5px; | |
border-radius: 3px; | |
border: 1px solid #131315; | |
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.5); | |
display: table; | |
margin: 0 auto; | |
button { | |
height: 30px; | |
padding: 5px 15px 5px 15px; | |
font-weight: bold; | |
text-transform: uppercase; | |
border-radius: 3px; | |
background-image: linear-gradient(to bottom, #3a3b40, #313237 100%); | |
border: 1px solid #484848; | |
border-bottom: 1px solid #383838; | |
border-right: 1px solid #383838; | |
box-shadow: 0px 1px 1px rgba(0,0,0,0.75); | |
text-shadow: 0px 1px 1px rgba(255,255,255,0.25); | |
&.active { | |
background-image: linear-gradient(to bottom, rgba(246, 107, 68, 1), rgba(194, 67, 35, 1) 100%); | |
border: 1px solid #d86244 ; | |
color: #FFF; | |
text-shadow: 0px 1px 2px rgba(0,0,0,1); | |
} | |
&.pressed { | |
background-image: -webkit-radial-gradient(center, ellipse cover, #333439 0%, #252429 100%); | |
border: none; | |
} | |
&.hover { | |
background-image: linear-gradient(to bottom, #6a6b70, #505156 100%); | |
border: 1px solid #44454a; | |
border-top: 1px solid #898a8e; | |
border-left: 1px solid #898a8e; | |
color: #FFF; | |
text-shadow: 0px 1px 2px rgba(0,0,0,1); | |
} | |
&:hover:not(.pressed):not(.active) { | |
background-image: linear-gradient(to bottom, #6a6b70, #505156 100%); | |
border: 1px solid #44454a; | |
border-top: 1px solid #898a8e; | |
border-left: 1px solid #898a8e; | |
color: #FFF; | |
text-shadow: 0px 1px 2px rgba(0,0,0,1); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment