Skip to content

Commit

Permalink
Use pseudo-elements to insert icons instead of presentational HTML
Browse files Browse the repository at this point in the history
  • Loading branch information
@necolas
necolas committed Mar 1, 2011
1 parent 3768893 commit e5fe142
Showing 1 changed file with 159 additions and 158 deletions.
317 changes: 159 additions & 158 deletions stylesheets/css3buttons.css
View file
Expand Up @@ -87,14 +87,14 @@ a.button.active {
);
}

/* Negative style */
/* Danger style */

a.button.negative {
a.button.danger {
color:#900;
}

a.button.negative:hover,
a.button.negative:focus {
a.button.danger:hover,
a.button.danger:focus {
border-color: #b53f3a;
border-bottom-color:#a0302a;
color: #fff;
Expand All @@ -114,8 +114,8 @@ a.button.negative:focus {
);
}

a.button.negative:active,
a.button.negative.active {
a.button.danger:active,
a.button.danger.active {
border-color: #a0302a;
border-bottom-color: #bf4843;
background: #b33630;
Expand Down Expand Up @@ -181,7 +181,8 @@ a.button.big {

/* With icon */

a.button .icon {
a.button.icon:before {
content: "";
position: relative;
top: 1px;
display:inline-block;
Expand All @@ -192,154 +193,154 @@ a.button .icon {
background-repeat: no-repeat;
}

a.big.button .icon { top: 0; }

a.button .book { background-position: 0 0; }
a.button:hover .book,
a.button:focus .book,
a.button:active .book { background-position: 0 -15px; }

a.button .calendar { background-position: 0 -30px; }
a.button:hover .calendar,
a.button:focus .calendar,
a.button:active .calendar { background-position: 0 -45px; }

a.button .chat { background-position: 0 -60px; }
a.button:hover .chat,
a.button:focus .chat,
a.button:active .chat { background-position: 0 -75px; }

a.button .check { background-position: 0 -90px; }
a.button:hover .check,
a.button:focus .check,
a.button:active .check { background-position: 0 -103px; }

a.button .clock { background-position: 0 -116px; }
a.button:hover .clock,
a.button:focus .clock,
a.button:active .clock { background-position: 0 -131px; }

a.button .cog { background-position: 0 -146px; }
a.button:hover .cog,
a.button:focus .cog,
a.button:active .cog { background-position: 0 -161px; }

a.button .comment { background-position: 0 -176px; }
a.button:hover .comment,
a.button:focus .comment,
a.button:active .comment { background-position: 0 -190px; }

a.button .cross { background-position: 0 -204px; }
a.button:hover .cross,
a.button:focus .cross,
a.button:active .cross { background-position: 0 -219px; }

a.button .downarrow { background-position: 0 -234px; }
a.button:hover .downarrow,
a.button:focus .downarrow,
a.button:active .downarrow { background-position: 0 -249px; }

a.button .fork { background-position: 0 -264px; }
a.button:hover .fork,
a.button:focus .fork,
a.button:active .fork { background-position: 0 -279px; }

a.button .heart { background-position: 0 -294px; }
a.button:hover .heart,
a.button:focus .heart,
a.button:active .heart { background-position: 0 -308px; }

a.button .home { background-position: 0 -322px; }
a.button:hover .home,
a.button:focus .home,
a.button:active .home { background-position: 0 -337px; }

a.button .key { background-position: 0 -352px; }
a.button:hover .key,
a.button:focus .key,
a.button:active .key { background-position: 0 -367px; }

a.button .leftarrow { background-position: 0 -382px; }
a.button:hover .leftarrow,
a.button:focus .leftarrow,
a.button:active .leftarrow { background-position: 0 -397px; }

a.button .lock { background-position: 0 -412px; }
a.button:hover .lock,
a.button:focus .lock,
a.button:active .lock { background-position: 0 -427px; }

a.button .loop { background-position: 0 -442px; }
a.button:hover .loop,
a.button:focus .loop,
a.button:active .loop { background-position: 0 -457px; }

a.button .magnifier { background-position: 0 -472px; }
a.button:hover .magnifier,
a.button:focus .magnifier,
a.button:active .magnifier { background-position: 0 -487px; }

a.button .mail { background-position: 0 -502px; }
a.button:hover .mail,
a.button:focus .mail,
a.button:active .mail { background-position: 0 -514px; }

a.button .move { background-position: 0 -526px; }
a.button:hover .move,
a.button:focus .move,
a.button:active .move { background-position: 0 -541px; }

a.button .pen { background-position: 0 -556px; }
a.button:hover .pen,
a.button:focus .pen,
a.button:active .pen { background-position: 0 -571px; }

a.button .pin { background-position: 0 -586px; }
a.button:hover .pin,
a.button:focus .pin,
a.button:active .pin { background-position: 0 -601px; }

a.button .plus { background-position: 0 -616px; }
a.button:hover .plus,
a.button:focus .plus,
a.button:active .plus { background-position: 0 -631px; }

a.button .reload { background-position: 0 -646px; }
a.button:hover .reload,
a.button:focus .reload,
a.button:active .reload { background-position: 0 -660px; }

a.button .rightarrow { background-position: 0 -674px; }
a.button:hover .rightarrow,
a.button:focus .rightarrow,
a.button:active .rightarrow { background-position: 0 -689px; }

a.button .rss { background-position: 0 -704px; }
a.button:hover .rss,
a.button:focus .rss,
a.button:active .rss { background-position: 0 -719px; }

a.button .tag { background-position: 0 -734px; }
a.button:hover .tag,
a.button:focus .tag,
a.button:active .tag { background-position: 0 -749px; }

a.button .trash { background-position: 0 -764px; }
a.button:hover .trash,
a.button:focus .trash,
a.button:active .trash { background-position: 0 -779px; }

a.button .unlock { background-position: 0 -794px; }
a.button:hover .unlock,
a.button:focus .unlock,
a.button:active .unlock { background-position: 0 -809px; }

a.button .uparrow { background-position: 0 -824px; }
a.button:hover .uparrow,
a.button:focus .uparrow,
a.button:active .uparrow { background-position: 0 -839px; }

a.button .user { background-position: 0 -854px; }
a.button:hover .user,
a.button:focus .user,
a.button:active .user { background-position: 0 -869px; }
a.big.button.icon:before { top: 0; }

a.button.book.icon:before { background-position: 0 0; }
a.button.book.icon:hover:before,
a.button.book.icon:focus:before,
a.button.book.icon:active:before { background-position: 0 -15px; }

a.button.calendar.icon:before { background-position: 0 -30px; }
a.button.calendar.icon:hover:before,
a.button.calendar.icon:focus:before,
a.button.calendar.icon:active:before { background-position: 0 -45px; }

a.button.chat.icon:before { background-position: 0 -60px; }
a.button.chat.icon:hover:before,
a.button.chat.icon:focus:before,
a.button.chat.icon:active:before { background-position: 0 -75px; }

a.button.check.icon:before { background-position: 0 -90px; }
a.button.check.icon:hover:before,
a.button.check.icon:focus:before,
a.button.check.icon:active:before { background-position: 0 -103px; }

a.button.clock.icon:before { background-position: 0 -116px; }
a.button.clock.icon:hover:before,
a.button.clock.icon:focus:before,
a.button.clock.icon:active:before { background-position: 0 -131px; }

a.button.cog.icon:before { background-position: 0 -146px; }
a.button.cog.icon:hover:before,
a.button.cog.icon:focus:before,
a.button.cog.icon:active:before { background-position: 0 -161px; }

a.button.comment.icon:before { background-position: 0 -176px; }
a.button.comment.icon:hover:before,
a.button.comment.icon:focus:before,
a.button.comment.icon:active:before { background-position: 0 -190px; }

a.button.cross.icon:before { background-position: 0 -204px; }
a.button.cross.icon:hover:before,
a.button.cross.icon:focus:before,
a.button.cross.icon:active:before { background-position: 0 -219px; }

a.button.downarrow.icon:before { background-position: 0 -234px; }
a.button.downarrow.icon:hover:before,
a.button.downarrow.icon:focus:before,
a.button.downarrow.icon:active:before { background-position: 0 -249px; }

a.button.fork.icon:before { background-position: 0 -264px; }
a.button.fork.icon:hover:before,
a.button.fork.icon:focus:before,
a.button.fork.icon:active:before { background-position: 0 -279px; }

a.button.heart.icon:before { background-position: 0 -294px; }
a.button.heart.icon:hover:before,
a.button.heart.icon:focus:before,
a.button.heart.icon:active:before { background-position: 0 -308px; }

a.button.home.icon:before { background-position: 0 -322px; }
a.button.home.icon:hover:before,
a.button.home.icon:focus:before,
a.button.home.icon:active:before { background-position: 0 -337px; }

a.button.key.icon:before { background-position: 0 -352px; }
a.button.key.icon:hover:before,
a.button.key.icon:focus:before,
a.button.key.icon:active:before { background-position: 0 -367px; }

a.button.leftarrow.icon:before { background-position: 0 -382px; }
a.button.leftarrow.icon:hover:before,
a.button.leftarrow.icon:focus:before,
a.button.leftarrow.icon:active:before { background-position: 0 -397px; }

a.button.lock.icon:before { background-position: 0 -412px; }
a.button.lock.icon:hover:before,
a.button.lock.icon:focus:before,
a.button.lock.icon:active:before { background-position: 0 -427px; }

a.button.loop.icon:before { background-position: 0 -442px; }
a.button.loop.icon:hover:before,
a.button.loop.icon:focus:before,
a.button.loop.icon:active:before { background-position: 0 -457px; }

a.button.magnifier.icon:before { background-position: 0 -472px; }
a.button.magnifier.icon:hover:before,
a.button.magnifier.icon:focus:before,
a.button.magnifier.icon:active:before { background-position: 0 -487px; }

a.button.mail.icon:before { background-position: 0 -502px; }
a.button.mail.icon:hover:before,
a.button.mail.icon:focus:before,
a.button.mail.icon:active:before { background-position: 0 -514px; }

a.button.move.icon:before { background-position: 0 -526px; }
a.button.move.icon:hover:before,
a.button.move.icon:focus:before,
a.button.move.icon:active:before { background-position: 0 -541px; }

a.button.pen.icon:before { background-position: 0 -556px; }
a.button.pen.icon:hover:before,
a.button.pen.icon:focus:before,
a.button.pen.icon:active:before { background-position: 0 -571px; }

a.button.pin.icon:before { background-position: 0 -586px; }
a.button.pin.icon:hover:before,
a.button.pin.icon:focus:before,
a.button.pin.icon:active:before { background-position: 0 -601px; }

a.button.plus.icon:before { background-position: 0 -616px; }
a.button.plus.icon:hover:before,
a.button.plus.icon:focus:before,
a.button.plus.icon:active:before { background-position: 0 -631px; }

a.button.reload.icon:before { background-position: 0 -646px; }
a.button.reload.icon:hover:before,
a.button.reload.icon:focus:before,
a.button.reload.icon:active:before { background-position: 0 -660px; }

a.button.rightarrow.icon:before { background-position: 0 -674px; }
a.button.rightarrow.icon:hover:before,
a.button.rightarrow.icon:focus:before,
a.button.rightarrow.icon:active:before { background-position: 0 -689px; }

a.button.rss.icon:before { background-position: 0 -704px; }
a.button.rss.icon:hover:before,
a.button.rss.icon:focus:before,
a.button.rss.icon:active:before { background-position: 0 -719px; }

a.button.tag.icon:before { background-position: 0 -734px; }
a.button.tag.icon:hover:before,
a.button.tag.icon:focus:before,
a.button.tag.icon:active:before { background-position: 0 -749px; }

a.button.trash.icon:before { background-position: 0 -764px; }
a.button.trash.icon:hover:before,
a.button.trash.icon:focus:before,
a.button.trash.icon:active:before { background-position: 0 -779px; }

a.button.unlock.icon:before { background-position: 0 -794px; }
a.button.unlock.icon:hover:before,
a.button.unlock.icon:focus:before,
a.button.unlock.icon:active:before { background-position: 0 -809px; }

a.button.uparrow.icon:before { background-position: 0 -824px; }
a.button.uparrow.icon:hover:before,
a.button.uparrow.icon:focus:before,
a.button.uparrow.icon:active:before { background-position: 0 -839px; }

a.button.user.icon:before { background-position: 0 -854px; }
a.button.user.icon:hover:before,
a.button.user.icon:focus:before,
a.button.user.icon:active:before { background-position: 0 -869px; }

0 comments on commit e5fe142

Please sign in to comment.