Skip to content

Instantly share code, notes, and snippets.

@lightyrs
Created July 31, 2011 18:54
Show Gist options
  • Save lightyrs/1117084 to your computer and use it in GitHub Desktop.
Save lightyrs/1117084 to your computer and use it in GitHub Desktop.
OS X Lion Buttons in Pure CSS3
/*
<a href="#" class="ok buttons">OK</a>
<a href="#" class="cancel buttons">Cancel</a>
<a href="#" class="inactive buttons">Inactive</a>
<a href="#" class="small buttons">Small</a>
*/
a.buttons {
display: inline-block;
padding: 0 33px;
height: 19px;
line-height: 19px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
border-width: 1px;
border-style: solid;
text-decoration: none;
font-family: "Lucida Grande", lucida, "Helvetica Neue", helvetica, sans-serif;
font-size: 12px;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,0.09);
}
@-webkit-keyframes blinking {
from {
-webkit-box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
50% {
-webkit-box-shadow:
inset 0 19px 0 rgba(0,115,215,0.2),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
to {
-webkit-box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
}
@-moz-keyframes blinking {
from {
-moz-box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
50% {
-moz-box-shadow:
inset 0 19px 0 rgba(0,115,215,0.2),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
to {
-moz-box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
}
@keyframes blinking {
from {
box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
50% {
box-shadow:
inset 0 19px 0 rgba(0,115,215,0.2),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
to {
box-shadow:
inset 0 19px 0 rgba(0,115,215,0),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
}
a.buttons.ok {
border-top-color: #5a5caf;
border-bottom-color: #52536f;
border-left-color: #56578f;
border-right-color: #56578f;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #D3F7FD),
color-stop(0.5, #87C5FB),
color-stop(0.5, #A1D1F9),
color-stop(1, #D4E9FC)
);
background-image: -moz-linear-gradient(
center bottom,
#D3F7FD 0%,
#87C5FB 50%,
#A1D1F9 50%,
#D4E9FC 100%
);
-webkit-animation-name: blinking;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-moz-animation-name: blinking;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
animation-name: blinking;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
a.buttons.ok:active, a.buttons.cancel:active, a.buttons.small:active {
-webkit-box-shadow:
inset 0 19px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
-webkit-animation-name: none;
-moz-box-shadow:
inset 0 19px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
-moz-animation-name: none;
box-shadow:
inset 0 19px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
animation-name: none;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #D3F7FD),
color-stop(0.5, #87C5FB),
color-stop(0.5, #A1D1F9),
color-stop(1, #D4E9FC)
);
background-image: -moz-linear-gradient(
center bottom,
#D3F7FD 0%,
#87C5FB 50%,
#A1D1F9 50%,
#D4E9FC 100%
);
border-top-color: #5a5caf;
border-bottom-color: #52536f;
border-left-color: #56578f;
border-right-color: #56578f;
}
a.buttons.cancel, a.buttons.inactive, a.buttons.small {
border-color: #9a9a9a;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #EBEBEB),
color-stop(0.5, #ECECEC),
color-stop(0.5, #F3F3F3),
color-stop(1, #FFFFFF)
);
background-image: -moz-linear-gradient(
center bottom,
#EBEBEB 0%,
#ECECEC 50%,
#F3F3F3 50%,
#FFFFFF 100%
);
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
-moz-box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
a.buttons.inactive {
opacity: 0.5;
cursor: default;
}
a.buttons.small {
height: 16px;
line-height: 16px;
font-size: 11px;
}
a.buttons.small:active {
-webkit-box-shadow:
inset 0 16px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
-moz-box-shadow:
inset 0 16px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
box-shadow:
inset 0 16px 0 rgba(0,115,215,0.3),
inset 0 1px 0 rgba(255,255,255,1),
0 1px 0 rgba(0,0,0,0.09);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment