Browse files

Complete reworking of how backgrounds are done. Replaced external ima…

…ge with CSS gradient. Easier to modify and gives further independence from font size. Interaction states modified to be much closer to github's style.
  • Loading branch information...
1 parent d59ad7d commit 5e8dcf109ca6852397c57254f4b89c4ced085f7a @necolas necolas committed Mar 1, 2011
Showing with 89 additions and 30 deletions.
  1. +1 −1 demo.html
  2. BIN images/css3buttons_backgrounds.png
  3. +88 −29 stylesheets/css3buttons.css
View
2 demo.html
@@ -315,7 +315,7 @@ <h1 id="title">CSS3 Buttons</h1>
<ol>
<li>Drop <code>css3buttons.css</code> in your stylesheets folder</li>
- <li>Drop <code>css3buttons_backgrounds.png</code> and <code>css3buttons_icons.png</code> in your images folder</li>
+ <li>Drop <code>css3buttons_icons.png</code> in your images folder</li>
<li>Link to <code>css3buttons.css</code> in the head section of your HTML page (<em>see code example below</em>)</li>
</ol>
View
BIN images/css3buttons_backgrounds.png
Deleted file not rendered
View
117 stylesheets/css3buttons.css
@@ -3,15 +3,28 @@ a.button {
overflow: visible;
display: inline-block;
padding: 0.5em 1em;
- border: 1px solid #CACACA;
+ border: 1px solid #d4d4d4;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font:12px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
- color: #3C3C3D;
- background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat;
+ color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
+ background-color: #ececec;
+ background-image: -webkit-gradient(
+ linear, 0 0, 0 100%,
+ from(#f4f4f4),
+ to(#ececec)
+ );
+ background-image: -moz-linear-gradient(
+ #f4f4f4,
+ #ececec
+ );
+ background-image: linear-gradient(
+ #f4f4f4,
+ #ececec
+ );
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
@@ -29,43 +42,95 @@ a.button.primary {
}
a.button:hover,
-a.button:focus {
- border-color: #388AD4;
+a.button:focus,
+a.button:active {
+ border-color: #3072b3;
+ border-bottom-color: #2a65a0;
+
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
color: #fff;
- background-position: 0 -40px;
- background-color: #2D7DC5;
-}
-
-a.button:active {
- top: 1px;
+ background-color: #3072b3;
+ background-image: -webkit-gradient(
+ linear, 0 0, 0 100%,
+ from(#599bdc),
+ to(#3072b3)
+ );
+ background-image: -moz-linear-gradient(
+ #599bdc,
+ #3072b3
+ );
+ background-image: linear-gradient(
+ #599bdc,
+ #3072b3
+ );
}
a.button:active,
a.button.active {
- border-color: #347BBA;
- text-shadow: none;
+ border-color:#2a65a0;
+ border-bottom-color:#3884CF;
color: #fff;
- background-position: 0 -81px;
- background-color: #0F5EA2;
+ background-color: #3072b3;
+ background-image: -webkit-gradient(
+ linear, 0 0, 0 100%,
+ from(#3072b3),
+ to(#599bdc)
+ );
+ background-image: -moz-linear-gradient(
+ #3072b3,
+ #599bdc
+ );
+ background-image: linear-gradient(
+ #3072b3,
+ #599bdc
+ );
}
/* Negative style */
+a.button.negative {
+ color:#900;
+}
+
a.button.negative:hover,
-a.button.negative:focus {
- border-color: #911D1B;
+a.button.negative:focus {
+ border-color: #b53f3a;
+ border-bottom-color:#a0302a;
color: #fff;
- background-position: 0 -121px;
- background-color: #D84743;
+ background: #dc5f59;
+ background: -webkit-gradient(
+ linear, 0 0, 0 100%,
+ from(#dc5f59),
+ to(#b33630)
+ );
+ background: -moz-linear-gradient(
+ #dc5f59,
+ #b33630
+ );
+ background: linear-gradient(
+ #dc5f59,
+ #b33630
+ );
}
a.button.negative:active,
-a.button.negative.active {
- border-color: #911D1B;
- background-position: 0 -161px;
- background-color: #A5211E;
+a.button.negative.active {
+ border-color: #a0302a;
+ border-bottom-color: #bf4843;
+ background: #b33630;
+ background: -webkit-gradient(linear, 0 0, 0 100%,
+ from(#b33630),
+ to(#dc5f59)
+ );
+ background: -moz-linear-gradient(
+ #b33630,
+ #dc5f59
+ );
+ background: linear-gradient(
+ #b33630,
+ #dc5f59
+ );
}
/* Pill style */
@@ -108,12 +173,6 @@ a.button.right {
border-bottom-left-radius: 0;
}
-a.button.left:active,
-a.button.middle:active,
-a.button.right:active {
- top: 0;
-}
-
/* Big style */
a.button.big {

0 comments on commit 5e8dcf1

Please sign in to comment.