Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Second Commit?

  • Loading branch information...
commit 49503f331fab117bffbec8e11ea9baf90e68296d 1 parent 92ccc33
Bruce Galpin authored
720 css/css3-buttons.css
View
@@ -0,0 +1,720 @@
+/*------------------------------------*\
+ CONTENTS
+\*------------------------------------*/
+/*
+WRAPPER
+BUTTON
+BUTTON LABEL
+BUTTON ICON
+ICONS
+DROPDOWN MENU
+*/
+
+
+/*------------------------------------*\
+ $WRAPPER
+\*------------------------------------*/
+.buttons {/* Style as you wish (toolbar) */}
+
+/* The Magnificent CLEARFIX */
+.buttons:before, .buttons:after {
+ content: "\0020"; display: block; height: 0; visibility: hidden;
+}
+.buttons:after { clear: both; }
+.buttons { zoom: 1; }
+/* ------------------------ */
+
+
+/*------------------------------------*\
+ $BUTTON
+\*------------------------------------*/
+button,
+.button {
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+
+ font: bold 11px Helvetica, Arial, sans-serif;
+ color: #444;
+ line-height: 17px;
+ height: 18px;
+
+ display: inline-block;
+ float: left;
+
+ margin: 5px;
+ padding: 5px 6px 4px 6px;
+
+ background: #F3F3F3;
+ border: solid 1px #D9D9D9;
+
+ border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+
+ -webkit-transition: border-color .20s;
+ -moz-transition: border-color .20s;
+ -o-transition: border-color .20s;
+ transition: border-color .20s;
+}
+button {
+ height: 29px !important;
+ cursor: pointer;
+}
+
+button.left,
+.button.left {
+ margin: 5px 0 5px 5px;
+
+ border-top-right-radius: 0;
+ -webkit-border-top-right-radius: 0;
+ -moz-border-radius-topright: 0;
+
+ border-bottom-right-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+ -moz-border-radius-bottomright: 0;
+}
+button.middle,
+.button.middle {
+ margin: 5px 0;
+
+ border-left-color: #F4F4F4;
+
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+button.right,
+.button.right {
+ margin: 5px 5px 5px 0;
+
+ border-left-color: #F4F4F4;
+
+ border-top-left-radius: 0;
+ -webkit-border-top-left-radius: 0;
+ -moz-border-radius-topleft: 0;
+
+ border-bottom-left-radius: 0;
+ -webkit-border-bottom-left-radius: 0;
+ -moz-border-radius-bottomleft: 0;
+}
+
+button:hover,
+.button:hover {
+ background: #F4F4F4;
+ border-color: #C0C0C0;
+ color: #333;
+}
+
+button:active,
+.button:active {
+ border-color: #4D90FE;
+ color: #4D90FE;
+
+ -moz-box-shadow:inset 0 0 10px #D4D4D4;
+ -webkit-box-shadow:inset 0 0 10px #D4D4D4;
+ box-shadow:inset 0 0 10px #D4D4D4;
+}
+
+button.on,
+.button.on {
+ border-color: #BBB;
+
+ -moz-box-shadow:inset 0 0 10px #D4D4D4;
+ -webkit-box-shadow:inset 0 0 10px #D4D4D4;
+ box-shadow:inset 0 0 10px #D4D4D4;
+}
+button.on:hover,
+.button.on:hover {
+ border-color: #BBB;
+
+ -moz-box-shadow:inset 0 0 10px #D4D4D4;
+ -webkit-box-shadow:inset 0 0 10px #D4D4D4;
+ box-shadow:inset 0 0 10px #D4D4D4;
+}
+button.on:active,
+.button.on:active {
+ border-color: #4D90FE;
+}
+
+button.action,
+.button.action {
+ border: 1px solid #D8D8D8 !important;
+
+ background: #F2F2F2;
+ background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
+ background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
+ background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1);
+ background: -o-linear-gradient(top, #F5F5F5, #F1F1F1);
+
+ -webkit-transition: border .20s;
+ -moz-transition: border .20s;
+ -o-transition: border .20s;
+ transition: border .20s;
+}
+button.action:hover,
+.button.action:hover {
+ border: 1px solid #C6C6C6 !important;
+
+ background: #F3F3F3;
+ background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1);
+ background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);
+ background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1);
+ background: -o-linear-gradient(top, #F8F8F8, #F1F1F1);
+}
+button.blue,
+.button.blue {
+ border: 1px solid #3079ED !important;
+
+ background: #4B8DF8;
+ background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
+ background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
+ background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
+ background: -o-linear-gradient(top, #4C8FFD, #4787ED);
+
+ -webkit-transition: border .20s;
+ -moz-transition: border .20s;
+ -o-transition: border .20s;
+ transition: border .20s;
+}
+button.blue:hover,
+.button.blue:hover {
+ border: 1px solid #2F5BB7 !important;
+
+ background: #3F83F1;
+ background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
+ background: -moz-linear-gradient(top, #4D90FE, #357AE8);
+ background: -ms-linear-gradient(top, #4D90FE, #357AE8);
+ background: -o-linear-gradient(top, #4D90FE, #357AE8);
+}
+button.green,
+.button.green {
+ border: 1px solid #29691D !important;
+
+ background: #3A8E00;
+ background: -webkit-linear-gradient(top, #3C9300, #398A00);
+ background: -moz-linear-gradient(top, #3C9300, #398A00);
+ background: -ms-linear-gradient(top, #3C9300, #398A00);
+ background: -o-linear-gradient(top, #3C9300, #398A00);
+
+ -webkit-transition: border .20s;
+ -moz-transition: border .20s;
+ -o-transition: border .20s;
+ transition: border .20s;
+}
+button.green:hover,
+.button.green:hover {
+ border: 1px solid #2D6200 !important;
+
+ background: #3F83F1;
+ background: -webkit-linear-gradient(top, #3C9300, #368200);
+ background: -moz-linear-gradient(top, #3C9300, #368200);
+ background: -ms-linear-gradient(top, #3C9300, #368200);
+ background: -o-linear-gradient(top, #3C9300, #368200);
+}
+button.red,
+.button.red {
+ border: 1px solid #D14836 !important;
+
+ background: #D64937;
+ background: -webkit-linear-gradient(top, #DC4A38, #D14836);
+ background: -moz-linear-gradient(top, #DC4A38, #D14836);
+ background: -ms-linear-gradient(top, #DC4A38, #D14836);
+ background: -o-linear-gradient(top, #DC4A38, #D14836);
+
+ -webkit-transition: border .20s;
+ -moz-transition: border .20s;
+ -o-transition: border .20s;
+ transition: border .20s;
+}
+button.red:hover,
+.button.red:hover {
+ border: 1px solid #B0281A !important;
+
+ background: #D14130;
+ background: -webkit-linear-gradient(top, #DC4A38, #C53727);
+ background: -moz-linear-gradient(top, #DC4A38, #C53727);
+ background: -ms-linear-gradient(top, #DC4A38, #C53727);
+ background: -o-linear-gradient(top, #DC4A38, #C53727);
+}
+
+button.action:hover,
+.button.action:hover {
+ -moz-box-shadow: 0 1px 0px #DDD;
+ -webkit-box-shadow: 0 1px 0px #DDD;
+ box-shadow:iset 0 1px 0px #DDD;
+}
+button.action:active,
+.button.action:active {
+ -moz-box-shadow: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+ border-color: #C6C6C6 !important;
+}
+button.blue:active,
+.button.blue:active {
+ border-color: #2F5BB7 !important;
+}
+button.green:active,
+.button.green:active {
+ border-color: #2D6200 !important;
+}
+button.red:active,
+.button.red:active {
+ border-color: #B0281A !important;
+}
+
+
+
+/*------------------------------------*\
+ $BUTTON LABEL
+\*------------------------------------*/
+.ddm span.label,
+button span.label,
+.button span.label {
+ display: inline-block;
+ float: left;
+ line-height: 17px;
+ height: 18px;
+ padding: 0 1px;
+ overflow: hidden;
+ color: #444;
+
+ -webkit-transition: color .20s;
+ -moz-transition: color .20s;
+ -o-transition: color .20s;
+ transition: color .20s;
+}
+button span.label {
+ line-height: 15px !important;
+}
+.ddm:active span.label,
+button:active span.label,
+.button:active span.label {
+ color: #4D90FE;
+}
+
+button:hover .label,
+.button:hover .label {
+ color: #333;
+}
+button:hover .label.red,
+.button:hover .label.red {
+ color: #DB4A37;
+}
+button:hover .label.blue,
+.button:hover .label.blue {
+ color: #7090C8;
+}
+button:hover .label.green,
+.button:hover .label.green {
+ color: #42B449;
+}
+button:hover .label.yellow,
+.button:hover .label.yellow {
+ color: #F7CB38;
+}
+
+button.blue .label,
+.button.blue .label {
+ color: #FFF !important;
+ text-shadow: 0 1px 0 #2F5BB7 !important;
+}
+button.green .label,
+.button.green .label {
+ color: #FFF !important;
+ text-shadow: 0 1px 0 #2D6200 !important;
+}
+button.red .label,
+.button.red .label {
+ color: #FFF !important;
+ text-shadow: 0 1px 0 #B0281A !important;
+}
+button.action .label,
+.button.action .label {
+ padding: 0 17px !important;
+}
+
+button.action:active .label,
+.button.action:active .label {
+ color: #333 !important;
+}
+
+button.blue:active .label,
+button.green:active .label,
+button.red:active .label,
+.button.blue:active .label,
+.button.green:active .label,
+.button.red:active .label {
+ color: #FFF !important;
+}
+
+
+
+/*------------------------------------*\
+ $BUTTON ICON
+\*------------------------------------*/
+.ddm span.icon,
+button span.icon,
+.button span.icon {
+ background-image: url(../images/google+-ui-sprite-gray.png);
+
+ display: inline-block;
+ margin: 0 7px;
+ float: left;
+
+ line-height: 18px;
+ height: 18px;
+ width: 18px;
+ max-width: 18px;
+
+ overflow: hidden;
+ text-indent: -9999px;
+
+ background-repeat: no-repeat;
+
+ -webkit-transition: background-image 0.20s linear;
+ -moz-transition: background-image 0.20s linear;
+ -o-transition: background-image 0.20s linear;
+ transition: background-image 0.20s linear;
+}
+.ddm:hover span.icon,
+button:hover span.icon,
+.button:hover span.icon {
+ background-image: url(../images/google+-ui-sprite-colour.png);
+}
+
+
+
+/*------------------------------------*\
+ $ICONS
+\*------------------------------------*/
+
+/* Sprite Row 1 */
+span.icon1 {background-position: -0px -0px;}
+span.icon2 {background-position: -18px -0px;}
+span.icon3 {background-position: -36px -0px;}
+span.icon4 {background-position: -54px -0px;}
+span.icon5 {background-position: -72px -0px;}
+span.icon6 {background-position: -90px -0px;}
+span.icon7 {background-position: -108px -0px;}
+span.icon8 {background-position: -126px -0px;}
+span.icon9 {background-position: -144px -0px;}
+span.icon10 {background-position: -162px -0px;}
+span.icon11 {background-position: -180px -0px;}
+span.icon12 {background-position: -198px -0px;}
+span.icon13 {background-position: -216px -0px;}
+span.icon14 {background-position: -234px -0px;}
+span.icon15 {background-position: -252px -0px;}
+span.icon16 {background-position: -270px -0px;}
+span.icon17 {background-position: -288px -0px;}
+span.icon18 {background-position: -306px -0px;}
+span.icon19 {background-position: -324px -0px;}
+span.icon20 {background-position: -342px -0px;}
+
+/* Sprite Row 2 */
+span.icon21 {background-position: -0px -18px;}
+span.icon22 {background-position: -18px -18px;}
+span.icon23 {background-position: -36px -18px;}
+span.icon24 {background-position: -54px -18px;}
+span.icon25 {background-position: -72px -18px;}
+span.icon26 {background-position: -90px -18px;}
+span.icon27 {background-position: -108px -18px;}
+span.icon28 {background-position: -126px -18px;}
+span.icon29 {background-position: -144px -18px;}
+span.icon30 {background-position: -162px -18px;}
+span.icon31 {background-position: -180px -18px;}
+span.icon32 {background-position: -198px -18px;}
+span.icon33 {background-position: -216px -18px;}
+span.icon34 {background-position: -234px -18px;}
+span.icon35 {background-position: -252px -18px;}
+span.icon36 {background-position: -270px -18px;}
+span.icon37 {background-position: -288px -18px;}
+span.icon38 {background-position: -306px -18px;}
+span.icon39 {background-position: -324px -18px;}
+span.icon40 {background-position: -342px -18px;}
+
+/* Sprite Row 3 */
+span.icon41 {background-position: -0px -36px;}
+span.icon42 {background-position: -18px -36px;}
+span.icon43 {background-position: -36px -36px;}
+span.icon44 {background-position: -54px -36px;}
+span.icon45 {background-position: -72px -36px;}
+span.icon46 {background-position: -90px -36px;}
+span.icon47 {background-position: -108px -36px;}
+span.icon48 {background-position: -126px -36px;}
+span.icon49 {background-position: -144px -36px;}
+span.icon50 {background-position: -162px -36px;}
+span.icon51 {background-position: -180px -36px;}
+span.icon52 {background-position: -198px -36px;}
+span.icon53 {background-position: -216px -36px;}
+span.icon54 {background-position: -234px -36px;}
+span.icon55 {background-position: -252px -36px;}
+span.icon56 {background-position: -270px -36px;}
+span.icon57 {background-position: -288px -36px;}
+span.icon58 {background-position: -306px -36px;}
+span.icon59 {background-position: -324px -36px;}
+span.icon60 {background-position: -342px -36px;}
+
+/* Sprite Row 4 */
+span.icon61 {background-position: -0px -54px;}
+span.icon62 {background-position: -18px -54px;}
+span.icon63 {background-position: -36px -54px;}
+span.icon64 {background-position: -54px -54px;}
+span.icon65 {background-position: -72px -54px;}
+span.icon66 {background-position: -90px -54px;}
+span.icon67 {background-position: -108px -54px;}
+span.icon68 {background-position: -126px -54px;}
+span.icon69 {background-position: -144px -54px;}
+span.icon70 {background-position: -162px -54px;}
+span.icon71 {background-position: -180px -54px;}
+span.icon72 {background-position: -198px -54px;}
+span.icon73 {background-position: -216px -54px;}
+span.icon74 {background-position: -234px -54px;}
+span.icon75 {background-position: -252px -54px;}
+span.icon76 {background-position: -270px -54px;}
+span.icon77 {background-position: -288px -54px;}
+span.icon78 {background-position: -306px -54px;}
+span.icon79 {background-position: -324px -54px;}
+span.icon80 {background-position: -342px -54px;}
+
+/* Sprite Row 5 */
+span.icon81 {background-position: -0px -72px;}
+span.icon82 {background-position: -18px -72px;}
+span.icon83 {background-position: -36px -72px;}
+span.icon84 {background-position: -54px -72px;}
+span.icon85 {background-position: -72px -72px;}
+span.icon86 {background-position: -90px -72px;}
+span.icon87 {background-position: -108px -72px;}
+span.icon88 {background-position: -126px -72px;}
+span.icon89 {background-position: -144px -72px;}
+span.icon90 {background-position: -162px -72px;}
+span.icon91 {background-position: -180px -72px;}
+span.icon92 {background-position: -198px -72px;}
+span.icon93 {background-position: -216px -72px;}
+span.icon94 {background-position: -234px -72px;}
+span.icon95 {background-position: -252px -72px;}
+span.icon96 {background-position: -270px -72px;}
+span.icon97 {background-position: -288px -72px;}
+span.icon98 {background-position: -306px -72px;}
+span.icon99 {background-position: -324px -72px;}
+span.icon100 {background-position: -342px -72px;}
+
+/* Sprite Row 6 */
+span.icon101 {background-position: -0px -90px;}
+span.icon102 {background-position: -18px -90px;}
+span.icon103 {background-position: -36px -90px;}
+span.icon104 {background-position: -54px -90px;}
+span.icon105 {background-position: -72px -90px;}
+span.icon106 {background-position: -90px -90px;}
+span.icon107 {background-position: -108px -90px;}
+span.icon108 {background-position: -126px -90px;}
+span.icon109 {background-position: -144px -90px;}
+span.icon110 {background-position: -162px -90px;}
+span.icon111 {background-position: -180px -90px;}
+span.icon112 {background-position: -198px -90px;}
+span.icon113 {background-position: -216px -90px;}
+span.icon114 {background-position: -234px -90px;}
+span.icon115 {background-position: -252px -90px;}
+span.icon116 {background-position: -270px -90px;}
+span.icon117 {background-position: -288px -90px;}
+span.icon118 {background-position: -306px -90px;}
+span.icon119 {background-position: -324px -90px;}
+span.icon120 {background-position: -342px -90px;}
+
+/* Sprite Row 7 */
+span.icon121 {background-position: -0px -108px;}
+span.icon122 {background-position: -18px -108px;}
+span.icon123 {background-position: -36px -108px;}
+span.icon124 {background-position: -54px -108px;}
+span.icon125 {background-position: -72px -108px;}
+span.icon126 {background-position: -90px -108px;}
+span.icon127 {background-position: -108px -108px;}
+span.icon128 {background-position: -126px -108px;}
+span.icon129 {background-position: -144px -108px;}
+span.icon130 {background-position: -162px -108px;}
+span.icon131 {background-position: -180px -108px;}
+span.icon132 {background-position: -198px -108px;}
+span.icon133 {background-position: -216px -108px;}
+span.icon134 {background-position: -234px -108px;}
+span.icon135 {background-position: -252px -108px;}
+span.icon136 {background-position: -270px -108px;}
+span.icon137 {background-position: -288px -108px;}
+span.icon138 {background-position: -306px -108px;}
+span.icon139 {background-position: -324px -108px;}
+span.icon140 {background-position: -342px -108px;}
+
+/* Sprite Row 8 */
+span.icon141 {background-position: -0px -126px;}
+span.icon142 {background-position: -18px -126px;}
+span.icon143 {background-position: -36px -126px;}
+span.icon144 {background-position: -54px -126px;}
+span.icon145 {background-position: -72px -126px;}
+span.icon146 {background-position: -90px -126px;}
+span.icon147 {background-position: -108px -126px;}
+span.icon148 {background-position: -126px -126px;}
+span.icon149 {background-position: -144px -126px;}
+span.icon150 {background-position: -162px -126px;}
+span.icon151 {background-position: -180px -126px;}
+span.icon152 {background-position: -198px -126px;}
+span.icon153 {background-position: -216px -126px;}
+span.icon154 {background-position: -234px -126px;}
+span.icon155 {background-position: -252px -126px;}
+span.icon156 {background-position: -270px -126px;}
+span.icon157 {background-position: -288px -126px;}
+span.icon158 {background-position: -306px -126px;}
+span.icon159 {background-position: -324px -126px;}
+span.icon160 {background-position: -342px -126px;}
+
+/* Sprite Row 9 */
+span.icon161 {background-position: -0px -144px;}
+span.icon162 {background-position: -18px -144px;}
+span.icon163 {background-position: -36px -144px;}
+span.icon164 {background-position: -54px -144px;}
+span.icon165 {background-position: -72px -144px;}
+span.icon166 {background-position: -90px -144px;}
+span.icon167 {background-position: -108px -144px;}
+span.icon168 {background-position: -126px -144px;}
+span.icon169 {background-position: -144px -144px;}
+span.icon170 {background-position: -162px -144px;}
+span.icon171 {background-position: -180px -144px;}
+span.icon172 {background-position: -198px -144px;}
+span.icon173 {background-position: -216px -144px;}
+span.icon174 {background-position: -234px -144px;}
+span.icon175 {background-position: -252px -144px;}
+span.icon176 {background-position: -270px -144px;}
+span.icon177 {background-position: -288px -144px;}
+span.icon178 {background-position: -306px -144px;}
+span.icon179 {background-position: -324px -144px;}
+span.icon180 {background-position: -342px -144px;}
+
+/* Sprite Row 10 */
+span.icon181 {background-position: -0px -162px;}
+span.icon182 {background-position: -18px -162px;}
+span.icon183 {background-position: -36px -162px;}
+span.icon184 {background-position: -54px -162px;}
+span.icon185 {background-position: -72px -162px;}
+span.icon186 {background-position: -90px -162px;}
+span.icon187 {background-position: -108px -162px;}
+span.icon188 {background-position: -126px -162px;}
+span.icon189 {background-position: -144px -162px;}
+span.icon190 {background-position: -162px -162px;}
+span.icon191 {background-position: -180px -162px;}
+span.icon192 {background-position: -198px -162px;}
+span.icon193 {background-position: -216px -162px;}
+span.icon194 {background-position: -234px -162px;}
+span.icon195 {background-position: -252px -162px;}
+span.icon196 {background-position: -270px -162px;}
+span.icon197 {background-position: -288px -162px;}
+span.icon198 {background-position: -306px -162px;}
+span.icon199 {background-position: -324px -162px;}
+span.icon200 {background-position: -342px -162px;}
+
+
+
+/*------------------------------------*\
+ $DROPDOWN MENU
+\*------------------------------------*/
+div.dropdown {
+ float: left;
+ position: relative;
+}
+
+div.dropdown span.toggle {
+ width: 19px;
+ height: 16px;
+
+ margin-left: 7px;
+ margin-top: 1px;
+ margin-right: 2px;
+ padding-left: 8px;
+
+ float: right;
+
+ background: url(../images/toggle.png) top right no-repeat;
+ border-left: 1px solid #D9D9D9;
+
+ -webkit-transition: border-color .20s;
+ -moz-transition: border .20s;
+ -o-transition: border-color .20s;
+ transition: border-color .20s;
+}
+div.dropdown span.toggle.active {
+ background: url(../images/toggle.png) bottom right no-repeat;
+}
+div.dropdown
+button:hover span.toggle,
+.button:hover span.toggle {
+ border-color: #C0C0C0;
+}
+
+div.dropdown-slider {
+ display: none;
+
+ overflow: hidden;
+
+ margin: 0 7px 5px 7px;
+ position: absolute;
+ top: 34px;
+ right: 0;
+
+ background: #F2F2F2;
+
+ border-right: solid 1px #D9D9D9;
+ border-bottom: solid 1px #D9D9D9;
+ border-left: solid 1px #D9D9D9;
+
+ -webkit-border-bottom-right-radius: 2px;
+ -webkit-border-bottom-left-radius: 2px;
+ -moz-border-radius-bottomright: 2px;
+ -moz-border-radius-bottomleft: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+
+ -webkit-transition: border-color .20s;
+ -moz-transition: border .20s;
+ -o-transition: border-color .20s;
+ transition: border-color .20s;
+}
+.left div.dropdown-slider {
+ margin: 0 1px 5px 7px;
+}
+.middle div.dropdown-slider {
+ margin: 0 1px 5px 1px;
+}
+.right div.dropdown-slider {
+ margin: 0 7px 5px 1px;
+}
+div.dropdown-slider .ddm {
+ display: block;
+ background: #F2F2F2;
+ color: #585858;
+
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ font: bold 11px Helvetica, Arial, sans-serif;
+ line-height: 18px;
+ height: 18px;
+
+ margin: 0;
+ padding: 5px 6px 4px 6px;
+ width: 100%;
+ float: left;
+
+ border-top: 1px solid #FFF;
+ border-bottom: 1px solid #D9D9D9;
+}
+div.dropdown-slider .ddm:hover {
+ background: #F4F4F4;
+ border-bottom-color: #C0C0C0;
+}
+div.dropdown-slider .ddm:active {
+ border-bottom-color: #4D90FE;
+ color: #4D90FE;
+
+ -moz-box-shadow:inset 0 0 10px #D4D4D4;
+ -webkit-box-shadow:inset 0 0 10px #D4D4D4;
+ box-shadow:inset 0 0 10px #D4D4D4;
+}
+div.dropdown-slider .ddm:last-child {
+ border-bottom: none;
+}
479 demo.html
View
@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Google+ Styled Buttons, Icon Buttons &amp; Dropdown Menu Buttons by Social-IT-e Media</title>
+ <meta name="description" content="This is an easy to implement framework of Google+ styled buttons, icon buttons &amp; dropdown menu buttons that look and work great in web applications.">
+ <meta name="author" content="Bruce Galpin">
+ <meta name="version" content="1.3">
+ <!-- For documentation please visit http://shrapp.nl/post/google-plus-ui-buttons -->
+
+ <link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen">
+
+ <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+
+ <!-- Using TipTip jQuery plugin for the tooltips -->
+ <link rel="stylesheet" href="tiptip.css" type="text/css" media="screen">
+ <script src="jquery.tiptip.js"></script>
+
+ <script>
+ $(document).ready(function() {
+
+ // Toggle the dropdown menu's
+ $(".dropdown .button, .dropdown button").click(function () {
+ if (!$(this).find('span.toggle').hasClass('active')) {
+ $('.dropdown-slider').slideUp();
+ $('span.toggle').removeClass('active');
+ }
+
+ // open selected dropown
+ $(this).parent().find('.dropdown-slider').slideToggle('fast');
+ $(this).find('span.toggle').toggleClass('active');
+
+ return false;
+ });
+
+ // Launch TipTip tooltip
+ $('.tiptip a.button, .tiptip button').tipTip();
+
+ });
+
+ // Close open dropdown slider by clicking elsewhwere on page
+ $(document).bind('click', function (e) {
+ if (e.target.id != $('.dropdown').attr('class')) {
+ $('.dropdown-slider').slideUp();
+ $('span.toggle').removeClass('active');
+ }
+ });
+ </script>
+
+ <style>
+ <!--
+ a, a:active, a:visited { color: #607890; }
+ a:hover { color: #036; }
+
+ .buttons {
+ background: #F1F1F1;
+ padding: 11px;
+ border: 1px solid #D2D2D2;
+ width: 843px;
+ margin-bottom: 20px;
+ }
+
+ body {
+ font-family: 'PT Sans', Arial, Helvetica, sans-serif;
+ text-align: center;
+ background: url(tile.jpg) top center fixed;
+ margin: 0;
+ }
+
+ #container {
+ text-align: left;
+ background: #FFF;
+ width: 865px;
+ margin: 0 auto;
+ padding: 20px;
+ border-left: 1px solid #CCC;
+ border-right: 1px solid #CCC;
+
+ -moz-box-shadow: 0px 0px 10px #BBB;
+ -webkit-box-shadow: 0px 0px 10px #BBB;
+ box-shadow: 0px 0px 10px #BBB;
+ }
+
+ h1, h2, h3, h4, h5 {
+ font-family: Molengo, Arial, Helvetica, sans-serif;
+ margin: 0 0 14px 0;
+ padding: 0;
+ }
+
+ p {
+ margin: 0 0 7px 0;
+ padding: 0;
+ }
+ -->
+ </style>
+</head>
+<body>
+<div id="container">
+
+<h1>Google+ Styled Buttons</h1>
+
+<p>Inspired by the web, and Created by Bruce Galpin (<a href="http://www.socialite-media.co.za/">Social-IT-e Media</a>).</p>
+
+<p>This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.</p>
+
+<h3>Download:</h3>
+
+<ul>
+ <li><a href="http://code.shrapp.nl/google-plus-ui-buttons/download/index.php?f=google-plus-ui-buttons.zip">Zip Archive: google-plus-ui-buttons.zip</a></li>
+ <li><a href="http://code.shrapp.nl/google-plus-ui-buttons/download/index.php?f=google-plus-ui-buttons.rar">Rar Archive: google-plus-ui-buttons.rar</a></li>
+</ul>
+
+<h3>Documentation:</h3>
+
+<ul>
+<li><a href="http://shrapp.nl/post/google-plus-ui-buttons">Shrapp.nl &mdash; Google+ UI Buttons</a></li>
+</ul>
+
+<h2>Google+ Buttons / Icon Buttons</h2>
+
+<div class="buttons">
+ <button><span class="label">Button</span></button>
+
+ <a href="#" class="button on"><span class="label">Active</span></a>
+
+ <a href="#" class="button left"><span class="label">Left</span></a>
+ <a href="#" class="button middle"><span class="label">Middle</span></a>
+ <a href="#" class="button right"><span class="label">Right</span></a>
+
+ <div class="tiptip">
+ <a href="#" class="button left" title="Home"><span class="icon icon108"></span></a>
+ <a href="#" class="button middle" title="Photos"><span class="icon icon148"></span></a>
+ <a href="#" class="button middle" title="Music"><span class="icon icon134"></span></a>
+ <a href="#" class="button right" title="Save"><span class="icon icon67"></span></a>
+ </div> <!-- /.tiptip -->
+
+ <a href="#" class="button left"><span class="icon icon22"></span></a>
+ <a href="#" class="button middle"><span class="icon icon177"></span></a>
+ <a href="#" class="button right"><span class="icon icon153"></span></a>
+
+ <a href="#" class="button on"><span class="icon icon125"></span></a>
+
+ <a href="#" class="button left"><span class="icon icon127"></span></a>
+ <a href="#" class="button middle"><span class="icon icon84"></span></a>
+ <a href="#" class="button right"><span class="icon icon186"></span></a>
+</div> <!-- /.buttons -->
+
+<h2>Google+ Action Buttons</h2>
+
+<div class="buttons">
+ <button class="action blue"><span class="label">Save</span></button>
+ <button class="action red"><span class="label">Upload</span></button>
+ <button class="action green"><span class="label">Comment</span></button>
+ <button class="action"><span class="label">Cancel</span></button>
+</div> <!-- /.buttons -->
+
+<h2>Google+ Icon Buttons with Label</h2>
+
+<div class="buttons">
+ <a href="#" class="button"><span class="icon icon4"></span><span class="label">Profile</span></a>
+
+ <a href="#" class="button"><span class="icon icon19"></span><span class="label">Find</span></a>
+
+ <a href="#" class="button left"><span class="icon icon63"></span><span class="label">Left</span></a>
+ <a href="#" class="button middle"><span class="icon icon58"></span><span class="label">Middle</span></a>
+ <a href="#" class="button right"><span class="icon icon64"></span><span class="label">Right</span></a>
+
+ <a href="#" class="button left"><span class="icon icon108"></span><span class="label">Normal</span></a>
+ <a href="#" class="button middle"><span class="icon icon125"></span><span class="label red">Red</span></a>
+ <a href="#" class="button middle"><span class="icon icon191"></span><span class="label blue">Blue</span></a>
+ <a href="#" class="button middle"><span class="icon icon151"></span><span class="label green">Green</span></a>
+ <a href="#" class="button right"><span class="icon icon177"></span><span class="label yellow">Yellow</span></a>
+</div> <!-- /.buttons -->
+
+<h2>Dropdown Menu Buttons</h2>
+
+<div class="buttons">
+ <div class="dropdown">
+ <a href="#" class="button"><span class="label">File</span><span class="toggle"></span></a>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="label">New</span></a>
+ <a href="#" class="ddm"><span class="label">Save</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+
+ <div class="dropdown">
+ <a href="#" class="button"><span class="icon icon55"></span><span class="label">File</span><span class="toggle"></span></a>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="icon icon68"></span><span class="label">New</span></a>
+ <a href="#" class="ddm"><span class="icon icon92"></span><span class="label">Open</span></a>
+ <a href="#" class="ddm"><span class="icon icon67"></span><span class="label">Save</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+
+ <div class="dropdown left">
+ <a href="#" class="button left"><span class="icon icon96"></span><span class="label">Options</span><span class="toggle"></span></a>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="icon icon127"></span><span class="label">Profile</span></a>
+ <a href="#" class="ddm"><span class="icon icon125"></span><span class="label">Inbox (3)</span></a>
+ <a href="#" class="ddm"><span class="icon icon196"></span><span class="label">Settings</span></a>
+ <a href="#" class="ddm negative"><span class="icon icon151"></span><span class="label">Logout</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+ <div class="dropdown right">
+ <button class="right"><span class="icon icon116"></span><span class="label">Actions</span><span class="toggle"></span></button>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="icon icon122"></span><span class="label">Lock</span></a>
+ <a href="#" class="ddm"><span class="icon icon123"></span><span class="label">Unlock</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+
+ <div class="dropdown">
+ <a href="#" class="button"><span class="icon icon197"></span><span class="label">World Regions</span><span class="toggle"></span></a>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="label">The Americas</span></a>
+ <a href="#" class="ddm"><span class="label">Europe &amp; Eurasia</span></a>
+ <a href="#" class="ddm"><span class="label">Africa / Middle East</span></a>
+ <a href="#" class="ddm"><span class="label">East Asia &amp; The Pacific</span></a>
+ <a href="#" class="ddm"><span class="label">South &amp; Central Asia</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+
+ <a href="#" class="button left"><span class="icon icon108"></span></a>
+ <div class="dropdown middle">
+ <a href="#" class="button middle"><span class="icon icon68"></span><span class="toggle"></span></a>
+ <div class="dropdown-slider">
+ <a href="#" class="ddm"><span class="icon icon3"></span><span class="label">Add</span></a>
+ <a href="#" class="ddm"><span class="icon icon145"></span><span class="label">Edit</span></a>
+ <a href="#" class="ddm"><span class="icon icon186"></span><span class="label">Trash</span></a>
+ </div> <!-- /.dropdown-slider -->
+ </div> <!-- /.dropdown -->
+ <a href="#" class="button right"><span class="icon icon151"></span></a>
+</div> <!-- /.buttons -->
+
+<h2>Google+ Icons (200)</h2>
+<p>This icon set is brought to you by <a href="http://www.webdesignshock.com/google-plus-interface-icons/">WebDesignShock</a>.</p>
+<p>Roll your mouse over the icons for the icon classname and title. The tooltip is a customised jQuery <a href="http://code.drewwilson.com/entry/tiptip-jquery-plugin">TipTip</a> plugin (included in the download).</p>
+
+<div class="buttons tiptip">
+ <a href="#" class="button" title=".icon1 - Abacus"><span class="icon icon1"></span></a>
+ <a href="#" class="button" title=".icon2 - Access Point"><span class="icon icon2"></span></a>
+ <a href="#" class="button" title=".icon3 - Add"><span class="icon icon3"></span></a>
+ <a href="#" class="button" title=".icon4 - Administrator"><span class="icon icon4"></span></a>
+ <a href="#" class="button" title=".icon5 - Alarm"><span class="icon icon5"></span></a>
+ <a href="#" class="button" title=".icon6 - Arrow Bidirectional"><span class="icon icon6"></span></a>
+ <a href="#" class="button" title=".icon7 - Arrow Down"><span class="icon icon7"></span></a>
+ <a href="#" class="button" title=".icon8 - Arrow Left"><span class="icon icon8"></span></a>
+ <a href="#" class="button" title=".icon9 - Arrow Right"><span class="icon icon9"></span></a>
+ <a href="#" class="button" title=".icon10 - Arrow Up"><span class="icon icon10"></span></a>
+ <a href="#" class="button" title=".icon11 - Attachment"><span class="icon icon11"></span></a>
+ <a href="#" class="button" title=".icon12 - Audio Knob"><span class="icon icon12"></span></a>
+ <a href="#" class="button" title=".icon13 - Barcode"><span class="icon icon13"></span></a>
+ <a href="#" class="button" title=".icon14 - Battery Empty"><span class="icon icon14"></span></a>
+ <a href="#" class="button" title=".icon15 - Battery Full"><span class="icon icon15"></span></a>
+ <a href="#" class="button" title=".icon16 - Battery Half"><span class="icon icon16"></span></a>
+ <a href="#" class="button" title=".icon17 - Bell"><span class="icon icon17"></span></a>
+ <a href="#" class="button" title=".icon18 - Bill"><span class="icon icon18"></span></a>
+ <a href="#" class="button" title=".icon19 - Binoculars"><span class="icon icon19"></span></a>
+ <a href="#" class="button" title=".icon20 - Bold"><span class="icon icon20"></span></a>
+ <a href="#" class="button" title=".icon21 - Book"><span class="icon icon21"></span></a>
+ <a href="#" class="button" title=".icon22 - Bookmark"><span class="icon icon22"></span></a>
+ <a href="#" class="button" title=".icon23 - Briefcase"><span class="icon icon23"></span></a>
+ <a href="#" class="button" title=".icon24 - Brightness"><span class="icon icon24"></span></a>
+ <a href="#" class="button" title=".icon25 - Broken Link"><span class="icon icon25"></span></a>
+ <a href="#" class="button" title=".icon26 - Brush"><span class="icon icon26"></span></a>
+ <a href="#" class="button" title=".icon27 - Burn Blu-ray"><span class="icon icon27"></span></a>
+ <a href="#" class="button" title=".icon28 - Burn Blu-ray"><span class="icon icon28"></span></a>
+ <a href="#" class="button" title=".icon29 - Burn DVD"><span class="icon icon29"></span></a>
+ <a href="#" class="button" title=".icon30 - Burn DVD"><span class="icon icon30"></span></a>
+ <a href="#" class="button" title=".icon31 - Cabinet"><span class="icon icon31"></span></a>
+ <a href="#" class="button" title=".icon32 - Calculator"><span class="icon icon32"></span></a>
+ <a href="#" class="button" title=".icon33 - Calendar"><span class="icon icon33"></span></a>
+ <a href="#" class="button" title=".icon34 - Camera"><span class="icon icon34"></span></a>
+ <a href="#" class="button" title=".icon35 - Cancel"><span class="icon icon35"></span></a>
+ <a href="#" class="button" title=".icon36 - Card Clubs"><span class="icon icon36"></span></a>
+ <a href="#" class="button" title=".icon37 - Card Diamonds"><span class="icon icon37"></span></a>
+ <a href="#" class="button" title=".icon38 - Card Hearts"><span class="icon icon38"></span></a>
+ <a href="#" class="button" title=".icon39 - Card Spades"><span class="icon icon39"></span></a>
+ <a href="#" class="button" title=".icon40 - Certificate"><span class="icon icon40"></span></a>
+ <a href="#" class="button" title=".icon41 - Certificate"><span class="icon icon41"></span></a>
+ <a href="#" class="button" title=".icon42 - Chat Exclamation"><span class="icon icon42"></span></a>
+ <a href="#" class="button" title=".icon43 - Checkmark"><span class="icon icon43"></span></a>
+ <a href="#" class="button" title=".icon44 - Checkmark"><span class="icon icon44"></span></a>
+ <a href="#" class="button" title=".icon45 - Clip"><span class="icon icon45"></span></a>
+ <a href="#" class="button" title=".icon46 - Clipboard"><span class="icon icon46"></span></a>
+ <a href="#" class="button" title=".icon47 - Clock"><span class="icon icon47"></span></a>
+ <a href="#" class="button" title=".icon48 - Close"><span class="icon icon48"></span></a>
+ <a href="#" class="button" title=".icon49 - Cloud"><span class="icon icon49"></span></a>
+ <a href="#" class="button" title=".icon50 - Cloud"><span class="icon icon50"></span></a>
+ <a href="#" class="button" title=".icon51 - Coin"><span class="icon icon51"></span></a>
+ <a href="#" class="button" title=".icon52 - Compress"><span class="icon icon52"></span></a>
+ <a href="#" class="button" title=".icon53 - Connect"><span class="icon icon53"></span></a>
+ <a href="#" class="button" title=".icon54 - Contrast"><span class="icon icon54"></span></a>
+ <a href="#" class="button" title=".icon55 - Copy"><span class="icon icon55"></span></a>
+ <a href="#" class="button" title=".icon56 - Cross"><span class="icon icon56"></span></a>
+ <a href="#" class="button" title=".icon57 - Cutter"><span class="icon icon57"></span></a>
+ <a href="#" class="button" title=".icon58 - Delete"><span class="icon icon58"></span></a>
+ <a href="#" class="button" title=".icon59 - Dial"><span class="icon icon59"></span></a>
+ <a href="#" class="button" title=".icon60 - Diary"><span class="icon icon60"></span></a>
+ <a href="#" class="button" title=".icon61 - Dimensions"><span class="icon icon61"></span></a>
+ <a href="#" class="button" title=".icon62 - Directional Down"><span class="icon icon62"></span></a>
+ <a href="#" class="button" title=".icon63 - Directional Left"><span class="icon icon63"></span></a>
+ <a href="#" class="button" title=".icon64 - Directional Right"><span class="icon icon64"></span></a>
+ <a href="#" class="button" title=".icon65 - Directional Up"><span class="icon icon65"></span></a>
+ <a href="#" class="button" title=".icon66 - Disconnect"><span class="icon icon66"></span></a>
+ <a href="#" class="button" title=".icon67 - Diskette"><span class="icon icon67"></span></a>
+ <a href="#" class="button" title=".icon68 - Document"><span class="icon icon68"></span></a>
+ <a href="#" class="button" title=".icon69 - Door"><span class="icon icon69"></span></a>
+ <a href="#" class="button" title=".icon70 - Download"><span class="icon icon70"></span></a>
+ <a href="#" class="button" title=".icon71 - Dropper"><span class="icon icon71"></span></a>
+ <a href="#" class="button" title=".icon72 - Earphones"><span class="icon icon72"></span></a>
+ <a href="#" class="button" title=".icon73 - Effects"><span class="icon icon73"></span></a>
+ <a href="#" class="button" title=".icon74 - Eject"><span class="icon icon74"></span></a>
+ <a href="#" class="button" title=".icon75 - Emoticon Angry"><span class="icon icon75"></span></a>
+ <a href="#" class="button" title=".icon76 - Emoticon Confused"><span class="icon icon76"></span></a>
+ <a href="#" class="button" title=".icon77 - Emoticon Grin"><span class="icon icon77"></span></a>
+ <a href="#" class="button" title=".icon78 - Emoticon In Love"><span class="icon icon78"></span></a>
+ <a href="#" class="button" title=".icon79 - Emoticon Sad"><span class="icon icon79"></span></a>
+ <a href="#" class="button" title=".icon80 - Emoticon Sleeping"><span class="icon icon80"></span></a>
+ <a href="#" class="button" title=".icon81 - Emoticon Smile"><span class="icon icon81"></span></a>
+ <a href="#" class="button" title=".icon82 - Encrypt"><span class="icon icon82"></span></a>
+ <a href="#" class="button" title=".icon83 - Eraser"><span class="icon icon83"></span></a>
+ <a href="#" class="button" title=".icon84 - Eye"><span class="icon icon84"></span></a>
+ <a href="#" class="button" title=".icon85 - Eye Closed"><span class="icon icon85"></span></a>
+ <a href="#" class="button" title=".icon86 - Fast Forward"><span class="icon icon86"></span></a>
+ <a href="#" class="button" title=".icon87 - File"><span class="icon icon87"></span></a>
+ <a href="#" class="button" title=".icon88 - Fill"><span class="icon icon88"></span></a>
+ <a href="#" class="button" title=".icon89 - Fingerprint"><span class="icon icon89"></span></a>
+ <a href="#" class="button" title=".icon90 - Firewall"><span class="icon icon90"></span></a>
+ <a href="#" class="button" title=".icon91 - First"><span class="icon icon91"></span></a>
+ <a href="#" class="button" title=".icon92 - Folder"><span class="icon icon92"></span></a>
+ <a href="#" class="button" title=".icon93 - Font"><span class="icon icon93"></span></a>
+ <a href="#" class="button" title=".icon94 - Font Size"><span class="icon icon94"></span></a>
+ <a href="#" class="button" title=".icon95 - Game Control"><span class="icon icon95"></span></a>
+ <a href="#" class="button" title=".icon96 - Gear"><span class="icon icon96"></span></a>
+ <a href="#" class="button" title=".icon97 - Group"><span class="icon icon97"></span></a>
+ <a href="#" class="button" title=".icon98 - Hammer"><span class="icon icon98"></span></a>
+ <a href="#" class="button" title=".icon99 - Hand Point"><span class="icon icon99"></span></a>
+ <a href="#" class="button" title=".icon100 - Hand Thumbsdown"><span class="icon icon100"></span></a>
+
+ <a href="#" class="button" title=".icon101 - Hand Thumbsup"><span class="icon icon101"></span></a>
+ <a href="#" class="button" title=".icon102 - Hard Disk"><span class="icon icon102"></span></a>
+ <a href="#" class="button" title=".icon103 - Headset"><span class="icon icon103"></span></a>
+ <a href="#" class="button" title=".icon104 - Heart"><span class="icon icon104"></span></a>
+ <a href="#" class="button" title=".icon105 - Help"><span class="icon icon105"></span></a>
+ <a href="#" class="button" title=".icon106 - Help"><span class="icon icon106"></span></a>
+ <a href="#" class="button" title=".icon107 - History"><span class="icon icon107"></span></a>
+ <a href="#" class="button" title=".icon108 - Home"><span class="icon icon108"></span></a>
+ <a href="#" class="button" title=".icon109 - Hourglass"><span class="icon icon109"></span></a>
+ <a href="#" class="button" title=".icon110 - Hourglass"><span class="icon icon110"></span></a>
+ <a href="#" class="button" title=".icon111 - ID"><span class="icon icon111"></span></a>
+ <a href="#" class="button" title=".icon112 - Info"><span class="icon icon112"></span></a>
+ <a href="#" class="button" title=".icon113 - Info"><span class="icon icon113"></span></a>
+ <a href="#" class="button" title=".icon114 - Italic"><span class="icon icon114"></span></a>
+ <a href="#" class="button" title=".icon115 - Item"><span class="icon icon115"></span></a>
+ <a href="#" class="button" title=".icon116 - Key"><span class="icon icon116"></span></a>
+ <a href="#" class="button" title=".icon117 - Last"><span class="icon icon117"></span></a>
+ <a href="#" class="button" title=".icon118 - Lightbulb"><span class="icon icon118"></span></a>
+ <a href="#" class="button" title=".icon119 - Link"><span class="icon icon119"></span></a>
+ <a href="#" class="button" title=".icon120 - List"><span class="icon icon120"></span></a>
+ <a href="#" class="button" title=".icon121 - Location"><span class="icon icon121"></span></a>
+ <a href="#" class="button" title=".icon122 - Lock"><span class="icon icon122"></span></a>
+ <a href="#" class="button" title=".icon123 - Lock Open"><span class="icon icon123"></span></a>
+ <a href="#" class="button" title=".icon124 - Login"><span class="icon icon124"></span></a>
+ <a href="#" class="button" title=".icon125 - Mail"><span class="icon icon125"></span></a>
+ <a href="#" class="button" title=".icon126 - Mail Open"><span class="icon icon126"></span></a>
+ <a href="#" class="button" title=".icon127 - Messenger"><span class="icon icon127"></span></a>
+ <a href="#" class="button" title=".icon128 - Microphone"><span class="icon icon128"></span></a>
+ <a href="#" class="button" title=".icon129 - Microphone"><span class="icon icon129"></span></a>
+ <a href="#" class="button" title=".icon130 - Money Bag"><span class="icon icon130"></span></a>
+ <a href="#" class="button" title=".icon131 - Monitor"><span class="icon icon131"></span></a>
+ <a href="#" class="button" title=".icon132 - Moon"><span class="icon icon132"></span></a>
+ <a href="#" class="button" title=".icon133 - Music"><span class="icon icon133"></span></a>
+ <a href="#" class="button" title=".icon134 - Music Folder"><span class="icon icon134"></span></a>
+ <a href="#" class="button" title=".icon135 - Music Library"><span class="icon icon135"></span></a>
+ <a href="#" class="button" title=".icon136 - Next"><span class="icon icon136"></span></a>
+ <a href="#" class="button" title=".icon137 - Notepad"><span class="icon icon137"></span></a>
+ <a href="#" class="button" title=".icon138 - Paragraph Align Left"><span class="icon icon138"></span></a>
+ <a href="#" class="button" title=".icon139 - Paragraph Align Right"><span class="icon icon139"></span></a>
+ <a href="#" class="button" title=".icon140 - Paragraph Justify"><span class="icon icon140"></span></a>
+ <a href="#" class="button" title=".icon141 - Password"><span class="icon icon141"></span></a>
+ <a href="#" class="button" title=".icon142 - Paste"><span class="icon icon142"></span></a>
+ <a href="#" class="button" title=".icon143 - Pause"><span class="icon icon143"></span></a>
+ <a href="#" class="button" title=".icon144 - Pen"><span class="icon icon144"></span></a>
+ <a href="#" class="button" title=".icon145 - Pencil"><span class="icon icon145"></span></a>
+ <a href="#" class="button" title=".icon146 - Phone"><span class="icon icon146"></span></a>
+ <a href="#" class="button" title=".icon147 - Photo Album"><span class="icon icon147"></span></a>
+ <a href="#" class="button" title=".icon148 - Pictures Folder"><span class="icon icon148"></span></a>
+ <a href="#" class="button" title=".icon149 - Play"><span class="icon icon149"></span></a>
+ <a href="#" class="button" title=".icon150 - Point"><span class="icon icon150"></span></a>
+ <a href="#" class="button" title=".icon151 - Power"><span class="icon icon151"></span></a>
+ <a href="#" class="button" title=".icon152 - Previous"><span class="icon icon152"></span></a>
+ <a href="#" class="button" title=".icon153 - Print"><span class="icon icon153"></span></a>
+ <a href="#" class="button" title=".icon154 - Pyramid"><span class="icon icon154"></span></a>
+ <a href="#" class="button" title=".icon155 - Random"><span class="icon icon155"></span></a>
+ <a href="#" class="button" title=".icon156 - Record"><span class="icon icon156"></span></a>
+ <a href="#" class="button" title=".icon157 - Redo"><span class="icon icon157"></span></a>
+ <a href="#" class="button" title=".icon158 - Reload"><span class="icon icon158"></span></a>
+ <a href="#" class="button" title=".icon159 - Repeat"><span class="icon icon159"></span></a>
+ <a href="#" class="button" title=".icon160 - Resize"><span class="icon icon160"></span></a>
+ <a href="#" class="button" title=".icon161 - Rewind"><span class="icon icon161"></span></a>
+ <a href="#" class="button" title=".icon162 - Rotate"><span class="icon icon162"></span></a>
+ <a href="#" class="button" title=".icon163 - Round"><span class="icon icon163"></span></a>
+ <a href="#" class="button" title=".icon164 - Ruler Square"><span class="icon icon164"></span></a>
+ <a href="#" class="button" title=".icon165 - Satellite"><span class="icon icon165"></span></a>
+ <a href="#" class="button" title=".icon166 - Scissors"><span class="icon icon166"></span></a>
+ <a href="#" class="button" title=".icon167 - Screwdriver"><span class="icon icon167"></span></a>
+ <a href="#" class="button" title=".icon168 - Security"><span class="icon icon168"></span></a>
+ <a href="#" class="button" title=".icon169 - Shopping Basket"><span class="icon icon169"></span></a>
+ <a href="#" class="button" title=".icon170 - Software"><span class="icon icon170"></span></a>
+ <a href="#" class="button" title=".icon171 - Spam"><span class="icon icon171"></span></a>
+ <a href="#" class="button" title=".icon172 - Speaker"><span class="icon icon172"></span></a>
+ <a href="#" class="button" title=".icon173 - Speaker"><span class="icon icon173"></span></a>
+ <a href="#" class="button" title=".icon174 - Sphere"><span class="icon icon174"></span></a>
+ <a href="#" class="button" title=".icon175 - Spreadsheet"><span class="icon icon175"></span></a>
+ <a href="#" class="button" title=".icon176 - Square"><span class="icon icon176"></span></a>
+ <a href="#" class="button" title=".icon177 - Star"><span class="icon icon177"></span></a>
+ <a href="#" class="button" title=".icon178 - Stats Bars"><span class="icon icon178"></span></a>
+ <a href="#" class="button" title=".icon179 - Stats Lines"><span class="icon icon179"></span></a>
+ <a href="#" class="button" title=".icon180 - Stats Pie"><span class="icon icon180"></span></a>
+ <a href="#" class="button" title=".icon181 - Stop"><span class="icon icon181"></span></a>
+ <a href="#" class="button" title=".icon182 - Strike Through"><span class="icon icon182"></span></a>
+ <a href="#" class="button" title=".icon183 - Sun"><span class="icon icon183"></span></a>
+ <a href="#" class="button" title=".icon184 - Target"><span class="icon icon184"></span></a>
+ <a href="#" class="button" title=".icon185 - Thunder"><span class="icon icon185"></span></a>
+ <a href="#" class="button" title=".icon186 - Trash Can"><span class="icon icon186"></span></a>
+ <a href="#" class="button" title=".icon187 - Underlined"><span class="icon icon187"></span></a>
+ <a href="#" class="button" title=".icon188 - Undo"><span class="icon icon188"></span></a>
+ <a href="#" class="button" title=".icon189 - Upload"><span class="icon icon189"></span></a>
+ <a href="#" class="button" title=".icon190 - USB"><span class="icon icon190"></span></a>
+ <a href="#" class="button" title=".icon191 - User"><span class="icon icon191"></span></a>
+ <a href="#" class="button" title=".icon192 - User Woman"><span class="icon icon192"></span></a>
+ <a href="#" class="button" title=".icon193 - Volume Control"><span class="icon icon193"></span></a>
+ <a href="#" class="button" title=".icon194 - Web Cam"><span class="icon icon194"></span></a>
+ <a href="#" class="button" title=".icon195 - Window"><span class="icon icon195"></span></a>
+ <a href="#" class="button" title=".icon196 - Wizard"><span class="icon icon196"></span></a>
+ <a href="#" class="button" title=".icon197 - World"><span class="icon icon197"></span></a>
+ <a href="#" class="button" title=".icon198 - Zoom"><span class="icon icon198"></span></a>
+ <a href="#" class="button" title=".icon199 - Zoom In"><span class="icon icon199"></span></a>
+ <a href="#" class="button" title=".icon200 - Zoom Out"><span class="icon icon200"></span></a>
+</div> <!-- /.buttons -->
+
+<h3>Credits / Help:</h3>
+
+<div class="buttons">
+ <a href="http://www.socialite-media.co.za" class="button left"><span class="icon icon119"></span><span class="label">Social-IT-e Media</span></a>
+ <a href="http://shrapp.nl" class="button middle"><span class="icon icon42"></span><span class="label">The Blog</span></a>
+ <a href="http://shrapp.nl/post/google-plus-ui-buttons" class="button right"><span class="icon icon120"></span><span class="label">Documentation</span></a>
+</div> <!-- /.buttons -->
+
+<p>
+ <strong>Browser Support:</strong> Firefox, Chrome, Safari, IE8+</p>
+<p>
+ <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by/3.0/88x31.png" style="border-width:0" /></a><br />
+ This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 Unported License</a>.</p>
+<p>
+ You are free:</p>
+
+<ul>
+ <li>
+ to Share &mdash; to copy, distribute and transmit the work</li>
+ <li>
+ to Remix &mdash; to adapt the work</li>
+ <li>
+
+ to make commercial use of the work</li>
+ <li>
+ give attribution if you want to</li>
+</ul>
+<p>
+ If you wish to develop further on these buttons, please remember to share with the web design community so we can all benefit!</p>
+
+</div> <!-- /#container -->
+
+</body>
+</html>
BIN  images/google+-ui-sprite-colour.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/google+-ui-sprite-gray.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/toggle.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
191 jquery.tiptip.js
View
@@ -0,0 +1,191 @@
+ /*
+ * TipTip
+ * Copyright 2010 Drew Wilson
+ * www.drewwilson.com
+ * code.drewwilson.com/entry/tiptip-jquery-plugin
+ *
+ * Version 1.3 - Updated: Mar. 23, 2010
+ *
+ * This Plug-In will create a custom tooltip to replace the default
+ * browser tooltip. It is extremely lightweight and very smart in
+ * that it detects the edges of the browser window and will make sure
+ * the tooltip stays within the current window size. As a result the
+ * tooltip will adjust itself to be displayed above, below, to the left
+ * or to the right depending on what is necessary to stay within the
+ * browser window. It is completely customizable as well via CSS.
+ *
+ * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ */
+
+(function($){
+ $.fn.tipTip = function(options) {
+ var defaults = {
+ activation: "hover",
+ keepAlive: false,
+ maxWidth: "200px",
+ edgeOffset: 3,
+ defaultPosition: "bottom",
+ delay: -100,
+ fadeIn: -200,
+ fadeOut: -200,
+ attribute: "title",
+ content: false, // HTML or String to fill TipTIp with
+ enter: function(){},
+ exit: function(){}
+ };
+ var opts = $.extend(defaults, options);
+
+ // Setup tip tip elements and render them to the DOM
+ if($("#tiptip_holder").length <= 0){
+ var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
+ var tiptip_content = $('<div id="tiptip_content"></div>');
+ var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
+ $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
+ } else {
+ var tiptip_holder = $("#tiptip_holder");
+ var tiptip_content = $("#tiptip_content");
+ var tiptip_arrow = $("#tiptip_arrow");
+ }
+
+ return this.each(function(){
+ var org_elem = $(this);
+ if(opts.content){
+ var org_title = opts.content;
+ } else {
+ var org_title = org_elem.attr(opts.attribute);
+ }
+ if(org_title != ""){
+ if(!opts.content){
+ org_elem.removeAttr(opts.attribute); //remove original Attribute
+ }
+ var timeout = false;
+
+ if(opts.activation == "hover"){
+ org_elem.hover(function(){
+ active_tiptip();
+ }, function(){
+ if(!opts.keepAlive){
+ deactive_tiptip();
+ }
+ });
+ if(opts.keepAlive){
+ tiptip_holder.hover(function(){}, function(){
+ deactive_tiptip();
+ });
+ }
+ } else if(opts.activation == "focus"){
+ org_elem.focus(function(){
+ active_tiptip();
+ }).blur(function(){
+ deactive_tiptip();
+ });
+ } else if(opts.activation == "click"){
+ org_elem.click(function(){
+ active_tiptip();
+ return false;
+ }).hover(function(){},function(){
+ if(!opts.keepAlive){
+ deactive_tiptip();
+ }
+ });
+ if(opts.keepAlive){
+ tiptip_holder.hover(function(){}, function(){
+ deactive_tiptip();
+ });
+ }
+ }
+
+ function active_tiptip(){
+ opts.enter.call(this);
+ tiptip_content.html(org_title);
+ tiptip_holder.hide().removeAttr("class").css("margin","0");
+ tiptip_arrow.removeAttr("style");
+
+ var top = parseInt(org_elem.offset()['top']);
+ var left = parseInt(org_elem.offset()['left']);
+ var org_width = parseInt(org_elem.outerWidth());
+ var org_height = parseInt(org_elem.outerHeight());
+ var tip_w = tiptip_holder.outerWidth();
+ var tip_h = tiptip_holder.outerHeight();
+ var w_compare = Math.round((org_width - tip_w) / 2);
+ var h_compare = Math.round((org_height - tip_h) / 2);
+ var marg_left = Math.round(left + w_compare);
+ var marg_top = Math.round(top + org_height + opts.edgeOffset);
+ var t_class = "";
+ var arrow_top = "";
+ var arrow_left = Math.round(tip_w - 12) / 2;
+
+ if(opts.defaultPosition == "bottom"){
+ t_class = "_bottom";
+ } else if(opts.defaultPosition == "top"){
+ t_class = "_top";
+ } else if(opts.defaultPosition == "left"){
+ t_class = "_left";
+ } else if(opts.defaultPosition == "right"){
+ t_class = "_right";
+ }
+
+ var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
+ var left_compare = (tip_w + left) > parseInt($(window).width());
+
+ if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
+ t_class = "_right";
+ arrow_top = Math.round(tip_h - 13) / 2;
+ arrow_left = -12;
+ marg_left = Math.round(left + org_width + opts.edgeOffset);
+ marg_top = Math.round(top + h_compare);
+ } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
+ t_class = "_left";
+ arrow_top = Math.round(tip_h - 13) / 2;
+ arrow_left = Math.round(tip_w);
+ marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
+ marg_top = Math.round(top + h_compare);
+ }
+
+ var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
+ var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
+
+ if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
+ if(t_class == "_top" || t_class == "_bottom"){
+ t_class = "_top";
+ } else {
+ t_class = t_class+"_top";
+ }
+ arrow_top = tip_h;
+ marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
+ } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
+ if(t_class == "_top" || t_class == "_bottom"){
+ t_class = "_bottom";
+ } else {
+ t_class = t_class+"_bottom";
+ }
+ arrow_top = -12;
+ marg_top = Math.round(top + org_height + opts.edgeOffset);
+ }
+
+ if(t_class == "_right_top" || t_class == "_left_top"){
+ marg_top = marg_top + 5;
+ } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
+ marg_top = marg_top - 5;
+ }
+ if(t_class == "_left_top" || t_class == "_left_bottom"){
+ marg_left = marg_left + 5;
+ }
+ tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
+ tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
+
+ if (timeout){ clearTimeout(timeout); }
+ timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
+ }
+
+ function deactive_tiptip(){
+ opts.exit.call(this);
+ if (timeout){ clearTimeout(timeout); }
+ tiptip_holder.fadeOut(opts.fadeOut);
+ }
+ }
+ });
+ }
+})(jQuery);
BIN  tile.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 tiptip.css
View
@@ -0,0 +1,96 @@
+/* TipTip CSS - Version 1.2 (Modified) */
+
+#tiptip_holder {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 99999;
+}
+
+#tiptip_holder.tip_top {
+ padding-bottom: 5px;
+}
+
+#tiptip_holder.tip_bottom {
+ padding-top: 5px;
+}
+
+#tiptip_holder.tip_right {
+ padding-left: 5px;
+}
+
+#tiptip_holder.tip_left {
+ padding-right: 5px;
+}
+
+#tiptip_content {
+ font: bold 11px Helvetica, Arial, sans-serif;
+ color: #FFF;
+ padding: 7px;
+ background: #000;
+ border: 1px solid #FFF;
+}
+
+#tiptip_arrow, #tiptip_arrow_inner {
+ position: absolute;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 6px;
+ height: 0;
+ width: 0;
+}
+
+#tiptip_holder.tip_top #tiptip_arrow {
+ border-top-color: #fff;
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow {
+ border-bottom-color: #fff;
+}
+
+#tiptip_holder.tip_right #tiptip_arrow {
+ border-right-color: #fff;
+}
+
+#tiptip_holder.tip_left #tiptip_arrow {
+ border-left-color: #fff;
+}
+
+#tiptip_holder.tip_top #tiptip_arrow_inner {
+ margin-top: -7px;
+ margin-left: -6px;
+ border-top-color: #000;
+}
+
+#tiptip_holder.tip_bottom #tiptip_arrow_inner {
+ margin-top: -5px;
+ margin-left: -6px;
+ border-bottom-color: #000;
+}
+
+#tiptip_holder.tip_right #tiptip_arrow_inner {
+ margin-top: -6px;
+ margin-left: -5px;
+ border-right-color: #000;
+}
+
+#tiptip_holder.tip_left #tiptip_arrow_inner {
+ margin-top: -6px;
+ margin-left: -7px;
+ border-left-color: #000;
+}
+
+/* Webkit Hacks */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ #tiptip_content {
+ padding: 4px 8px 5px 8px;
+ background-color: #000;
+ }
+ #tiptip_holder.tip_bottom #tiptip_arrow_inner {
+ border-bottom-color: #000;
+ }
+ #tiptip_holder.tip_top #tiptip_arrow_inner {
+ border-top-color: #000;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.