├── README ├── css └── css3-buttons.css ├── demo.html ├── images ├── google+-ui-sprite-colour.png ├── google+-ui-sprite-gray.png └── toggle.png ├── jquery.tiptip.js ├── tile.jpg └── tiptip.css /README: -------------------------------------------------------------------------------- 1 | ZzzzzzZzzzz 2 | -------------------------------------------------------------------------------- /css/css3-buttons.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | CONTENTS 3 | \*------------------------------------*/ 4 | /* 5 | WRAPPER 6 | BUTTON 7 | BUTTON LABEL 8 | BUTTON ICON 9 | ICONS 10 | DROPDOWN MENU 11 | */ 12 | 13 | 14 | /*------------------------------------*\ 15 | $WRAPPER 16 | \*------------------------------------*/ 17 | .buttons {/* Style as you wish (toolbar) */} 18 | 19 | /* The Magnificent CLEARFIX */ 20 | .buttons:before, .buttons:after { 21 | content: "\0020"; display: block; height: 0; visibility: hidden; 22 | } 23 | .buttons:after { clear: both; } 24 | .buttons { zoom: 1; } 25 | /* ------------------------ */ 26 | 27 | 28 | /*------------------------------------*\ 29 | $BUTTON 30 | \*------------------------------------*/ 31 | button, 32 | .button { 33 | text-decoration: none; 34 | text-shadow: 0 1px 0 #fff; 35 | 36 | font: bold 11px Helvetica, Arial, sans-serif; 37 | color: #444; 38 | line-height: 17px; 39 | height: 18px; 40 | 41 | display: inline-block; 42 | float: left; 43 | 44 | margin: 5px; 45 | padding: 5px 6px 4px 6px; 46 | 47 | background: #F3F3F3; 48 | border: solid 1px #D9D9D9; 49 | 50 | border-radius: 2px; 51 | -webkit-border-radius: 2px; 52 | -moz-border-radius: 2px; 53 | 54 | -webkit-transition: border-color .20s; 55 | -moz-transition: border-color .20s; 56 | -o-transition: border-color .20s; 57 | transition: border-color .20s; 58 | } 59 | button { 60 | height: 29px !important; 61 | cursor: pointer; 62 | } 63 | 64 | button.left, 65 | .button.left { 66 | margin: 5px 0 5px 5px; 67 | 68 | border-top-right-radius: 0; 69 | -webkit-border-top-right-radius: 0; 70 | -moz-border-radius-topright: 0; 71 | 72 | border-bottom-right-radius: 0; 73 | -webkit-border-bottom-right-radius: 0; 74 | -moz-border-radius-bottomright: 0; 75 | } 76 | button.middle, 77 | .button.middle { 78 | margin: 5px 0; 79 | 80 | border-left-color: #F4F4F4; 81 | 82 | border-radius: 0; 83 | -webkit-border-radius: 0; 84 | -moz-border-radius: 0; 85 | } 86 | button.right, 87 | .button.right { 88 | margin: 5px 5px 5px 0; 89 | 90 | border-left-color: #F4F4F4; 91 | 92 | border-top-left-radius: 0; 93 | -webkit-border-top-left-radius: 0; 94 | -moz-border-radius-topleft: 0; 95 | 96 | border-bottom-left-radius: 0; 97 | -webkit-border-bottom-left-radius: 0; 98 | -moz-border-radius-bottomleft: 0; 99 | } 100 | 101 | button:hover, 102 | .button:hover { 103 | background: #F4F4F4; 104 | border-color: #C0C0C0; 105 | color: #333; 106 | } 107 | 108 | button:active, 109 | .button:active { 110 | border-color: #4D90FE; 111 | color: #4D90FE; 112 | 113 | -moz-box-shadow:inset 0 0 10px #D4D4D4; 114 | -webkit-box-shadow:inset 0 0 10px #D4D4D4; 115 | box-shadow:inset 0 0 10px #D4D4D4; 116 | } 117 | 118 | button.on, 119 | .button.on { 120 | border-color: #BBB; 121 | 122 | -moz-box-shadow:inset 0 0 10px #D4D4D4; 123 | -webkit-box-shadow:inset 0 0 10px #D4D4D4; 124 | box-shadow:inset 0 0 10px #D4D4D4; 125 | } 126 | button.on:hover, 127 | .button.on:hover { 128 | border-color: #BBB; 129 | 130 | -moz-box-shadow:inset 0 0 10px #D4D4D4; 131 | -webkit-box-shadow:inset 0 0 10px #D4D4D4; 132 | box-shadow:inset 0 0 10px #D4D4D4; 133 | } 134 | button.on:active, 135 | .button.on:active { 136 | border-color: #4D90FE; 137 | } 138 | 139 | button.action, 140 | .button.action { 141 | border: 1px solid #D8D8D8 !important; 142 | 143 | background: #F2F2F2; 144 | background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1); 145 | background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); 146 | background: -ms-linear-gradient(top, #F5F5F5, #F1F1F1); 147 | background: -o-linear-gradient(top, #F5F5F5, #F1F1F1); 148 | 149 | -webkit-transition: border .20s; 150 | -moz-transition: border .20s; 151 | -o-transition: border .20s; 152 | transition: border .20s; 153 | } 154 | button.action:hover, 155 | .button.action:hover { 156 | border: 1px solid #C6C6C6 !important; 157 | 158 | background: #F3F3F3; 159 | background: -webkit-linear-gradient(top, #F8F8F8, #F1F1F1); 160 | background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1); 161 | background: -ms-linear-gradient(top, #F8F8F8, #F1F1F1); 162 | background: -o-linear-gradient(top, #F8F8F8, #F1F1F1); 163 | } 164 | button.blue, 165 | .button.blue { 166 | border: 1px solid #3079ED !important; 167 | 168 | background: #4B8DF8; 169 | background: -webkit-linear-gradient(top, #4C8FFD, #4787ED); 170 | background: -moz-linear-gradient(top, #4C8FFD, #4787ED); 171 | background: -ms-linear-gradient(top, #4C8FFD, #4787ED); 172 | background: -o-linear-gradient(top, #4C8FFD, #4787ED); 173 | 174 | -webkit-transition: border .20s; 175 | -moz-transition: border .20s; 176 | -o-transition: border .20s; 177 | transition: border .20s; 178 | } 179 | button.blue:hover, 180 | .button.blue:hover { 181 | border: 1px solid #2F5BB7 !important; 182 | 183 | background: #3F83F1; 184 | background: -webkit-linear-gradient(top, #4D90FE, #357AE8); 185 | background: -moz-linear-gradient(top, #4D90FE, #357AE8); 186 | background: -ms-linear-gradient(top, #4D90FE, #357AE8); 187 | background: -o-linear-gradient(top, #4D90FE, #357AE8); 188 | } 189 | button.green, 190 | .button.green { 191 | border: 1px solid #29691D !important; 192 | 193 | background: #3A8E00; 194 | background: -webkit-linear-gradient(top, #3C9300, #398A00); 195 | background: -moz-linear-gradient(top, #3C9300, #398A00); 196 | background: -ms-linear-gradient(top, #3C9300, #398A00); 197 | background: -o-linear-gradient(top, #3C9300, #398A00); 198 | 199 | -webkit-transition: border .20s; 200 | -moz-transition: border .20s; 201 | -o-transition: border .20s; 202 | transition: border .20s; 203 | } 204 | button.green:hover, 205 | .button.green:hover { 206 | border: 1px solid #2D6200 !important; 207 | 208 | background: #3F83F1; 209 | background: -webkit-linear-gradient(top, #3C9300, #368200); 210 | background: -moz-linear-gradient(top, #3C9300, #368200); 211 | background: -ms-linear-gradient(top, #3C9300, #368200); 212 | background: -o-linear-gradient(top, #3C9300, #368200); 213 | } 214 | button.red, 215 | .button.red { 216 | border: 1px solid #D14836 !important; 217 | 218 | background: #D64937; 219 | background: -webkit-linear-gradient(top, #DC4A38, #D14836); 220 | background: -moz-linear-gradient(top, #DC4A38, #D14836); 221 | background: -ms-linear-gradient(top, #DC4A38, #D14836); 222 | background: -o-linear-gradient(top, #DC4A38, #D14836); 223 | 224 | -webkit-transition: border .20s; 225 | -moz-transition: border .20s; 226 | -o-transition: border .20s; 227 | transition: border .20s; 228 | } 229 | button.red:hover, 230 | .button.red:hover { 231 | border: 1px solid #B0281A !important; 232 | 233 | background: #D14130; 234 | background: -webkit-linear-gradient(top, #DC4A38, #C53727); 235 | background: -moz-linear-gradient(top, #DC4A38, #C53727); 236 | background: -ms-linear-gradient(top, #DC4A38, #C53727); 237 | background: -o-linear-gradient(top, #DC4A38, #C53727); 238 | } 239 | 240 | button.action:hover, 241 | .button.action:hover { 242 | -moz-box-shadow: 0 1px 0px #DDD; 243 | -webkit-box-shadow: 0 1px 0px #DDD; 244 | box-shadow:iset 0 1px 0px #DDD; 245 | } 246 | button.action:active, 247 | .button.action:active { 248 | -moz-box-shadow: none !important; 249 | -webkit-box-shadow: none !important; 250 | box-shadow: none !important; 251 | border-color: #C6C6C6 !important; 252 | } 253 | button.blue:active, 254 | .button.blue:active { 255 | border-color: #2F5BB7 !important; 256 | } 257 | button.green:active, 258 | .button.green:active { 259 | border-color: #2D6200 !important; 260 | } 261 | button.red:active, 262 | .button.red:active { 263 | border-color: #B0281A !important; 264 | } 265 | 266 | 267 | 268 | /*------------------------------------*\ 269 | $BUTTON LABEL 270 | \*------------------------------------*/ 271 | .ddm span.label, 272 | button span.label, 273 | .button span.label { 274 | display: inline-block; 275 | float: left; 276 | line-height: 17px; 277 | height: 18px; 278 | padding: 0 1px; 279 | overflow: hidden; 280 | color: #444; 281 | 282 | -webkit-transition: color .20s; 283 | -moz-transition: color .20s; 284 | -o-transition: color .20s; 285 | transition: color .20s; 286 | } 287 | button span.label { 288 | line-height: 15px !important; 289 | } 290 | .ddm:active span.label, 291 | button:active span.label, 292 | .button:active span.label { 293 | color: #4D90FE; 294 | } 295 | 296 | button:hover .label, 297 | .button:hover .label { 298 | color: #333; 299 | } 300 | button:hover .label.red, 301 | .button:hover .label.red { 302 | color: #DB4A37; 303 | } 304 | button:hover .label.blue, 305 | .button:hover .label.blue { 306 | color: #7090C8; 307 | } 308 | button:hover .label.green, 309 | .button:hover .label.green { 310 | color: #42B449; 311 | } 312 | button:hover .label.yellow, 313 | .button:hover .label.yellow { 314 | color: #F7CB38; 315 | } 316 | 317 | button.blue .label, 318 | .button.blue .label { 319 | color: #FFF !important; 320 | text-shadow: 0 1px 0 #2F5BB7 !important; 321 | } 322 | button.green .label, 323 | .button.green .label { 324 | color: #FFF !important; 325 | text-shadow: 0 1px 0 #2D6200 !important; 326 | } 327 | button.red .label, 328 | .button.red .label { 329 | color: #FFF !important; 330 | text-shadow: 0 1px 0 #B0281A !important; 331 | } 332 | button.action .label, 333 | .button.action .label { 334 | padding: 0 17px !important; 335 | } 336 | 337 | button.action:active .label, 338 | .button.action:active .label { 339 | color: #333 !important; 340 | } 341 | 342 | button.blue:active .label, 343 | button.green:active .label, 344 | button.red:active .label, 345 | .button.blue:active .label, 346 | .button.green:active .label, 347 | .button.red:active .label { 348 | color: #FFF !important; 349 | } 350 | 351 | 352 | 353 | /*------------------------------------*\ 354 | $BUTTON ICON 355 | \*------------------------------------*/ 356 | .ddm span.icon, 357 | button span.icon, 358 | .button span.icon { 359 | background-image: url(../images/google+-ui-sprite-gray.png); 360 | 361 | display: inline-block; 362 | margin: 0 7px; 363 | float: left; 364 | 365 | line-height: 18px; 366 | height: 18px; 367 | width: 18px; 368 | max-width: 18px; 369 | 370 | overflow: hidden; 371 | text-indent: -9999px; 372 | 373 | background-repeat: no-repeat; 374 | 375 | -webkit-transition: background-image 0.20s linear; 376 | -moz-transition: background-image 0.20s linear; 377 | -o-transition: background-image 0.20s linear; 378 | transition: background-image 0.20s linear; 379 | } 380 | .ddm:hover span.icon, 381 | button:hover span.icon, 382 | .button:hover span.icon { 383 | background-image: url(../images/google+-ui-sprite-colour.png); 384 | } 385 | 386 | 387 | 388 | /*------------------------------------*\ 389 | $ICONS 390 | \*------------------------------------*/ 391 | 392 | /* Sprite Row 1 */ 393 | span.icon1 {background-position: -0px -0px;} 394 | span.icon2 {background-position: -18px -0px;} 395 | span.icon3 {background-position: -36px -0px;} 396 | span.icon4 {background-position: -54px -0px;} 397 | span.icon5 {background-position: -72px -0px;} 398 | span.icon6 {background-position: -90px -0px;} 399 | span.icon7 {background-position: -108px -0px;} 400 | span.icon8 {background-position: -126px -0px;} 401 | span.icon9 {background-position: -144px -0px;} 402 | span.icon10 {background-position: -162px -0px;} 403 | span.icon11 {background-position: -180px -0px;} 404 | span.icon12 {background-position: -198px -0px;} 405 | span.icon13 {background-position: -216px -0px;} 406 | span.icon14 {background-position: -234px -0px;} 407 | span.icon15 {background-position: -252px -0px;} 408 | span.icon16 {background-position: -270px -0px;} 409 | span.icon17 {background-position: -288px -0px;} 410 | span.icon18 {background-position: -306px -0px;} 411 | span.icon19 {background-position: -324px -0px;} 412 | span.icon20 {background-position: -342px -0px;} 413 | 414 | /* Sprite Row 2 */ 415 | span.icon21 {background-position: -0px -18px;} 416 | span.icon22 {background-position: -18px -18px;} 417 | span.icon23 {background-position: -36px -18px;} 418 | span.icon24 {background-position: -54px -18px;} 419 | span.icon25 {background-position: -72px -18px;} 420 | span.icon26 {background-position: -90px -18px;} 421 | span.icon27 {background-position: -108px -18px;} 422 | span.icon28 {background-position: -126px -18px;} 423 | span.icon29 {background-position: -144px -18px;} 424 | span.icon30 {background-position: -162px -18px;} 425 | span.icon31 {background-position: -180px -18px;} 426 | span.icon32 {background-position: -198px -18px;} 427 | span.icon33 {background-position: -216px -18px;} 428 | span.icon34 {background-position: -234px -18px;} 429 | span.icon35 {background-position: -252px -18px;} 430 | span.icon36 {background-position: -270px -18px;} 431 | span.icon37 {background-position: -288px -18px;} 432 | span.icon38 {background-position: -306px -18px;} 433 | span.icon39 {background-position: -324px -18px;} 434 | span.icon40 {background-position: -342px -18px;} 435 | 436 | /* Sprite Row 3 */ 437 | span.icon41 {background-position: -0px -36px;} 438 | span.icon42 {background-position: -18px -36px;} 439 | span.icon43 {background-position: -36px -36px;} 440 | span.icon44 {background-position: -54px -36px;} 441 | span.icon45 {background-position: -72px -36px;} 442 | span.icon46 {background-position: -90px -36px;} 443 | span.icon47 {background-position: -108px -36px;} 444 | span.icon48 {background-position: -126px -36px;} 445 | span.icon49 {background-position: -144px -36px;} 446 | span.icon50 {background-position: -162px -36px;} 447 | span.icon51 {background-position: -180px -36px;} 448 | span.icon52 {background-position: -198px -36px;} 449 | span.icon53 {background-position: -216px -36px;} 450 | span.icon54 {background-position: -234px -36px;} 451 | span.icon55 {background-position: -252px -36px;} 452 | span.icon56 {background-position: -270px -36px;} 453 | span.icon57 {background-position: -288px -36px;} 454 | span.icon58 {background-position: -306px -36px;} 455 | span.icon59 {background-position: -324px -36px;} 456 | span.icon60 {background-position: -342px -36px;} 457 | 458 | /* Sprite Row 4 */ 459 | span.icon61 {background-position: -0px -54px;} 460 | span.icon62 {background-position: -18px -54px;} 461 | span.icon63 {background-position: -36px -54px;} 462 | span.icon64 {background-position: -54px -54px;} 463 | span.icon65 {background-position: -72px -54px;} 464 | span.icon66 {background-position: -90px -54px;} 465 | span.icon67 {background-position: -108px -54px;} 466 | span.icon68 {background-position: -126px -54px;} 467 | span.icon69 {background-position: -144px -54px;} 468 | span.icon70 {background-position: -162px -54px;} 469 | span.icon71 {background-position: -180px -54px;} 470 | span.icon72 {background-position: -198px -54px;} 471 | span.icon73 {background-position: -216px -54px;} 472 | span.icon74 {background-position: -234px -54px;} 473 | span.icon75 {background-position: -252px -54px;} 474 | span.icon76 {background-position: -270px -54px;} 475 | span.icon77 {background-position: -288px -54px;} 476 | span.icon78 {background-position: -306px -54px;} 477 | span.icon79 {background-position: -324px -54px;} 478 | span.icon80 {background-position: -342px -54px;} 479 | 480 | /* Sprite Row 5 */ 481 | span.icon81 {background-position: -0px -72px;} 482 | span.icon82 {background-position: -18px -72px;} 483 | span.icon83 {background-position: -36px -72px;} 484 | span.icon84 {background-position: -54px -72px;} 485 | span.icon85 {background-position: -72px -72px;} 486 | span.icon86 {background-position: -90px -72px;} 487 | span.icon87 {background-position: -108px -72px;} 488 | span.icon88 {background-position: -126px -72px;} 489 | span.icon89 {background-position: -144px -72px;} 490 | span.icon90 {background-position: -162px -72px;} 491 | span.icon91 {background-position: -180px -72px;} 492 | span.icon92 {background-position: -198px -72px;} 493 | span.icon93 {background-position: -216px -72px;} 494 | span.icon94 {background-position: -234px -72px;} 495 | span.icon95 {background-position: -252px -72px;} 496 | span.icon96 {background-position: -270px -72px;} 497 | span.icon97 {background-position: -288px -72px;} 498 | span.icon98 {background-position: -306px -72px;} 499 | span.icon99 {background-position: -324px -72px;} 500 | span.icon100 {background-position: -342px -72px;} 501 | 502 | /* Sprite Row 6 */ 503 | span.icon101 {background-position: -0px -90px;} 504 | span.icon102 {background-position: -18px -90px;} 505 | span.icon103 {background-position: -36px -90px;} 506 | span.icon104 {background-position: -54px -90px;} 507 | span.icon105 {background-position: -72px -90px;} 508 | span.icon106 {background-position: -90px -90px;} 509 | span.icon107 {background-position: -108px -90px;} 510 | span.icon108 {background-position: -126px -90px;} 511 | span.icon109 {background-position: -144px -90px;} 512 | span.icon110 {background-position: -162px -90px;} 513 | span.icon111 {background-position: -180px -90px;} 514 | span.icon112 {background-position: -198px -90px;} 515 | span.icon113 {background-position: -216px -90px;} 516 | span.icon114 {background-position: -234px -90px;} 517 | span.icon115 {background-position: -252px -90px;} 518 | span.icon116 {background-position: -270px -90px;} 519 | span.icon117 {background-position: -288px -90px;} 520 | span.icon118 {background-position: -306px -90px;} 521 | span.icon119 {background-position: -324px -90px;} 522 | span.icon120 {background-position: -342px -90px;} 523 | 524 | /* Sprite Row 7 */ 525 | span.icon121 {background-position: -0px -108px;} 526 | span.icon122 {background-position: -18px -108px;} 527 | span.icon123 {background-position: -36px -108px;} 528 | span.icon124 {background-position: -54px -108px;} 529 | span.icon125 {background-position: -72px -108px;} 530 | span.icon126 {background-position: -90px -108px;} 531 | span.icon127 {background-position: -108px -108px;} 532 | span.icon128 {background-position: -126px -108px;} 533 | span.icon129 {background-position: -144px -108px;} 534 | span.icon130 {background-position: -162px -108px;} 535 | span.icon131 {background-position: -180px -108px;} 536 | span.icon132 {background-position: -198px -108px;} 537 | span.icon133 {background-position: -216px -108px;} 538 | span.icon134 {background-position: -234px -108px;} 539 | span.icon135 {background-position: -252px -108px;} 540 | span.icon136 {background-position: -270px -108px;} 541 | span.icon137 {background-position: -288px -108px;} 542 | span.icon138 {background-position: -306px -108px;} 543 | span.icon139 {background-position: -324px -108px;} 544 | span.icon140 {background-position: -342px -108px;} 545 | 546 | /* Sprite Row 8 */ 547 | span.icon141 {background-position: -0px -126px;} 548 | span.icon142 {background-position: -18px -126px;} 549 | span.icon143 {background-position: -36px -126px;} 550 | span.icon144 {background-position: -54px -126px;} 551 | span.icon145 {background-position: -72px -126px;} 552 | span.icon146 {background-position: -90px -126px;} 553 | span.icon147 {background-position: -108px -126px;} 554 | span.icon148 {background-position: -126px -126px;} 555 | span.icon149 {background-position: -144px -126px;} 556 | span.icon150 {background-position: -162px -126px;} 557 | span.icon151 {background-position: -180px -126px;} 558 | span.icon152 {background-position: -198px -126px;} 559 | span.icon153 {background-position: -216px -126px;} 560 | span.icon154 {background-position: -234px -126px;} 561 | span.icon155 {background-position: -252px -126px;} 562 | span.icon156 {background-position: -270px -126px;} 563 | span.icon157 {background-position: -288px -126px;} 564 | span.icon158 {background-position: -306px -126px;} 565 | span.icon159 {background-position: -324px -126px;} 566 | span.icon160 {background-position: -342px -126px;} 567 | 568 | /* Sprite Row 9 */ 569 | span.icon161 {background-position: -0px -144px;} 570 | span.icon162 {background-position: -18px -144px;} 571 | span.icon163 {background-position: -36px -144px;} 572 | span.icon164 {background-position: -54px -144px;} 573 | span.icon165 {background-position: -72px -144px;} 574 | span.icon166 {background-position: -90px -144px;} 575 | span.icon167 {background-position: -108px -144px;} 576 | span.icon168 {background-position: -126px -144px;} 577 | span.icon169 {background-position: -144px -144px;} 578 | span.icon170 {background-position: -162px -144px;} 579 | span.icon171 {background-position: -180px -144px;} 580 | span.icon172 {background-position: -198px -144px;} 581 | span.icon173 {background-position: -216px -144px;} 582 | span.icon174 {background-position: -234px -144px;} 583 | span.icon175 {background-position: -252px -144px;} 584 | span.icon176 {background-position: -270px -144px;} 585 | span.icon177 {background-position: -288px -144px;} 586 | span.icon178 {background-position: -306px -144px;} 587 | span.icon179 {background-position: -324px -144px;} 588 | span.icon180 {background-position: -342px -144px;} 589 | 590 | /* Sprite Row 10 */ 591 | span.icon181 {background-position: -0px -162px;} 592 | span.icon182 {background-position: -18px -162px;} 593 | span.icon183 {background-position: -36px -162px;} 594 | span.icon184 {background-position: -54px -162px;} 595 | span.icon185 {background-position: -72px -162px;} 596 | span.icon186 {background-position: -90px -162px;} 597 | span.icon187 {background-position: -108px -162px;} 598 | span.icon188 {background-position: -126px -162px;} 599 | span.icon189 {background-position: -144px -162px;} 600 | span.icon190 {background-position: -162px -162px;} 601 | span.icon191 {background-position: -180px -162px;} 602 | span.icon192 {background-position: -198px -162px;} 603 | span.icon193 {background-position: -216px -162px;} 604 | span.icon194 {background-position: -234px -162px;} 605 | span.icon195 {background-position: -252px -162px;} 606 | span.icon196 {background-position: -270px -162px;} 607 | span.icon197 {background-position: -288px -162px;} 608 | span.icon198 {background-position: -306px -162px;} 609 | span.icon199 {background-position: -324px -162px;} 610 | span.icon200 {background-position: -342px -162px;} 611 | 612 | 613 | 614 | /*------------------------------------*\ 615 | $DROPDOWN MENU 616 | \*------------------------------------*/ 617 | div.dropdown { 618 | float: left; 619 | position: relative; 620 | } 621 | 622 | div.dropdown span.toggle { 623 | width: 19px; 624 | height: 16px; 625 | 626 | margin-left: 7px; 627 | margin-top: 1px; 628 | margin-right: 2px; 629 | padding-left: 8px; 630 | 631 | float: right; 632 | 633 | background: url(../images/toggle.png) top right no-repeat; 634 | border-left: 1px solid #D9D9D9; 635 | 636 | -webkit-transition: border-color .20s; 637 | -moz-transition: border .20s; 638 | -o-transition: border-color .20s; 639 | transition: border-color .20s; 640 | } 641 | div.dropdown span.toggle.active { 642 | background: url(../images/toggle.png) bottom right no-repeat; 643 | } 644 | div.dropdown 645 | button:hover span.toggle, 646 | .button:hover span.toggle { 647 | border-color: #C0C0C0; 648 | } 649 | 650 | div.dropdown-slider { 651 | display: none; 652 | 653 | overflow: hidden; 654 | 655 | margin: 0 7px 5px 7px; 656 | position: absolute; 657 | top: 34px; 658 | right: 0; 659 | 660 | background: #F2F2F2; 661 | 662 | border-right: solid 1px #D9D9D9; 663 | border-bottom: solid 1px #D9D9D9; 664 | border-left: solid 1px #D9D9D9; 665 | 666 | -webkit-border-bottom-right-radius: 2px; 667 | -webkit-border-bottom-left-radius: 2px; 668 | -moz-border-radius-bottomright: 2px; 669 | -moz-border-radius-bottomleft: 2px; 670 | border-bottom-right-radius: 2px; 671 | border-bottom-left-radius: 2px; 672 | 673 | -webkit-transition: border-color .20s; 674 | -moz-transition: border .20s; 675 | -o-transition: border-color .20s; 676 | transition: border-color .20s; 677 | } 678 | .left div.dropdown-slider { 679 | margin: 0 1px 5px 7px; 680 | } 681 | .middle div.dropdown-slider { 682 | margin: 0 1px 5px 1px; 683 | } 684 | .right div.dropdown-slider { 685 | margin: 0 7px 5px 1px; 686 | } 687 | div.dropdown-slider .ddm { 688 | display: block; 689 | background: #F2F2F2; 690 | color: #585858; 691 | 692 | text-decoration: none; 693 | text-shadow: 0 1px 0 #fff; 694 | font: bold 11px Helvetica, Arial, sans-serif; 695 | line-height: 18px; 696 | height: 18px; 697 | 698 | margin: 0; 699 | padding: 5px 6px 4px 6px; 700 | width: 100%; 701 | float: left; 702 | 703 | border-top: 1px solid #FFF; 704 | border-bottom: 1px solid #D9D9D9; 705 | } 706 | div.dropdown-slider .ddm:hover { 707 | background: #F4F4F4; 708 | border-bottom-color: #C0C0C0; 709 | } 710 | div.dropdown-slider .ddm:active { 711 | border-bottom-color: #4D90FE; 712 | color: #4D90FE; 713 | 714 | -moz-box-shadow:inset 0 0 10px #D4D4D4; 715 | -webkit-box-shadow:inset 0 0 10px #D4D4D4; 716 | box-shadow:inset 0 0 10px #D4D4D4; 717 | } 718 | div.dropdown-slider .ddm:last-child { 719 | border-bottom: none; 720 | } 721 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Google+ Styled Buttons, Icon Buttons & Dropdown Menu Buttons by Social-IT-e Media 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 52 | 53 | 99 | 100 | 101 |
102 | 103 |

Google+ Styled Buttons

104 | 105 |

Inspired by the web, and Created by Bruce Galpin (Social-IT-e Media).

106 | 107 |

This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.

108 | 109 |

Google+ Buttons / Icon Buttons

110 | 111 |
112 | 113 | 114 | Active 115 | 116 | Left 117 | Middle 118 | Right 119 | 120 |
121 | 122 | 123 | 124 | 125 |
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 |
137 | 138 |

Google+ Action Buttons

139 | 140 |
141 | 142 | 143 | 144 | 145 |
146 | 147 |

Google+ Icon Buttons with Label

148 | 149 |
150 | Profile 151 | 152 | Find 153 | 154 | Left 155 | Middle 156 | Right 157 | 158 | Normal 159 | Red 160 | Blue 161 | Green 162 | Yellow 163 |
164 | 165 |

Dropdown Menu Buttons

166 | 167 |
168 |
169 | File 170 |
171 | New 172 | Save 173 |
174 |
175 | 176 |
177 | File 178 |
179 | New 180 | Open 181 | Save 182 |
183 |
184 | 185 |
186 | Options 187 |
188 | Profile 189 | Inbox (3) 190 | Settings 191 | Logout 192 |
193 |
194 |
195 | 196 |
197 | Lock 198 | Unlock 199 |
200 |
201 | 202 |
203 | World Regions 204 |
205 | The Americas 206 | Europe & Eurasia 207 | Africa / Middle East 208 | East Asia & The Pacific 209 | South & Central Asia 210 |
211 |
212 | 213 | 214 |
215 | 216 |
217 | Add 218 | Edit 219 | Trash 220 |
221 |
222 | 223 |
224 | 225 |

Google+ Icons (200)

226 |

This icon set is brought to you by WebDesignShock.

227 |

Roll your mouse over the icons for the icon classname and title. The tooltip is a customised jQuery TipTip plugin (included in the download).

228 | 229 |
230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 |
432 | 433 |

434 | Browser Support: Firefox, Chrome, Safari, Opera, IE7*, IE8+

435 |

* don't use <button> for IE7 - not working as of yet! Dropdowns seem to be borked in IE7 too :(

436 | 437 |
438 | 439 | 440 | -------------------------------------------------------------------------------- /images/google+-ui-sprite-colour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/star2dev/Google-plus-buttons/a87b721630379a204ffcb86184921c306feb2d56/images/google+-ui-sprite-colour.png -------------------------------------------------------------------------------- /images/google+-ui-sprite-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/star2dev/Google-plus-buttons/a87b721630379a204ffcb86184921c306feb2d56/images/google+-ui-sprite-gray.png -------------------------------------------------------------------------------- /images/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/star2dev/Google-plus-buttons/a87b721630379a204ffcb86184921c306feb2d56/images/toggle.png -------------------------------------------------------------------------------- /jquery.tiptip.js: -------------------------------------------------------------------------------- 1 | /* 2 | * TipTip 3 | * Copyright 2010 Drew Wilson 4 | * www.drewwilson.com 5 | * code.drewwilson.com/entry/tiptip-jquery-plugin 6 | * 7 | * Version 1.3 - Updated: Mar. 23, 2010 8 | * 9 | * This Plug-In will create a custom tooltip to replace the default 10 | * browser tooltip. It is extremely lightweight and very smart in 11 | * that it detects the edges of the browser window and will make sure 12 | * the tooltip stays within the current window size. As a result the 13 | * tooltip will adjust itself to be displayed above, below, to the left 14 | * or to the right depending on what is necessary to stay within the 15 | * browser window. It is completely customizable as well via CSS. 16 | * 17 | * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses: 18 | * http://www.opensource.org/licenses/mit-license.php 19 | * http://www.gnu.org/licenses/gpl.html 20 | */ 21 | 22 | (function($){ 23 | $.fn.tipTip = function(options) { 24 | var defaults = { 25 | activation: "hover", 26 | keepAlive: false, 27 | maxWidth: "200px", 28 | edgeOffset: 3, 29 | defaultPosition: "bottom", 30 | delay: -100, 31 | fadeIn: -200, 32 | fadeOut: -200, 33 | attribute: "title", 34 | content: false, // HTML or String to fill TipTIp with 35 | enter: function(){}, 36 | exit: function(){} 37 | }; 38 | var opts = $.extend(defaults, options); 39 | 40 | // Setup tip tip elements and render them to the DOM 41 | if($("#tiptip_holder").length <= 0){ 42 | var tiptip_holder = $('
'); 43 | var tiptip_content = $('
'); 44 | var tiptip_arrow = $('
'); 45 | $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('
'))); 46 | } else { 47 | var tiptip_holder = $("#tiptip_holder"); 48 | var tiptip_content = $("#tiptip_content"); 49 | var tiptip_arrow = $("#tiptip_arrow"); 50 | } 51 | 52 | return this.each(function(){ 53 | var org_elem = $(this); 54 | if(opts.content){ 55 | var org_title = opts.content; 56 | } else { 57 | var org_title = org_elem.attr(opts.attribute); 58 | } 59 | if(org_title != ""){ 60 | if(!opts.content){ 61 | org_elem.removeAttr(opts.attribute); //remove original Attribute 62 | } 63 | var timeout = false; 64 | 65 | if(opts.activation == "hover"){ 66 | org_elem.hover(function(){ 67 | active_tiptip(); 68 | }, function(){ 69 | if(!opts.keepAlive){ 70 | deactive_tiptip(); 71 | } 72 | }); 73 | if(opts.keepAlive){ 74 | tiptip_holder.hover(function(){}, function(){ 75 | deactive_tiptip(); 76 | }); 77 | } 78 | } else if(opts.activation == "focus"){ 79 | org_elem.focus(function(){ 80 | active_tiptip(); 81 | }).blur(function(){ 82 | deactive_tiptip(); 83 | }); 84 | } else if(opts.activation == "click"){ 85 | org_elem.click(function(){ 86 | active_tiptip(); 87 | return false; 88 | }).hover(function(){},function(){ 89 | if(!opts.keepAlive){ 90 | deactive_tiptip(); 91 | } 92 | }); 93 | if(opts.keepAlive){ 94 | tiptip_holder.hover(function(){}, function(){ 95 | deactive_tiptip(); 96 | }); 97 | } 98 | } 99 | 100 | function active_tiptip(){ 101 | opts.enter.call(this); 102 | tiptip_content.html(org_title); 103 | tiptip_holder.hide().removeAttr("class").css("margin","0"); 104 | tiptip_arrow.removeAttr("style"); 105 | 106 | var top = parseInt(org_elem.offset()['top']); 107 | var left = parseInt(org_elem.offset()['left']); 108 | var org_width = parseInt(org_elem.outerWidth()); 109 | var org_height = parseInt(org_elem.outerHeight()); 110 | var tip_w = tiptip_holder.outerWidth(); 111 | var tip_h = tiptip_holder.outerHeight(); 112 | var w_compare = Math.round((org_width - tip_w) / 2); 113 | var h_compare = Math.round((org_height - tip_h) / 2); 114 | var marg_left = Math.round(left + w_compare); 115 | var marg_top = Math.round(top + org_height + opts.edgeOffset); 116 | var t_class = ""; 117 | var arrow_top = ""; 118 | var arrow_left = Math.round(tip_w - 12) / 2; 119 | 120 | if(opts.defaultPosition == "bottom"){ 121 | t_class = "_bottom"; 122 | } else if(opts.defaultPosition == "top"){ 123 | t_class = "_top"; 124 | } else if(opts.defaultPosition == "left"){ 125 | t_class = "_left"; 126 | } else if(opts.defaultPosition == "right"){ 127 | t_class = "_right"; 128 | } 129 | 130 | var right_compare = (w_compare + left) < parseInt($(window).scrollLeft()); 131 | var left_compare = (tip_w + left) > parseInt($(window).width()); 132 | 133 | if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){ 134 | t_class = "_right"; 135 | arrow_top = Math.round(tip_h - 13) / 2; 136 | arrow_left = -12; 137 | marg_left = Math.round(left + org_width + opts.edgeOffset); 138 | marg_top = Math.round(top + h_compare); 139 | } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){ 140 | t_class = "_left"; 141 | arrow_top = Math.round(tip_h - 13) / 2; 142 | arrow_left = Math.round(tip_w); 143 | marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5)); 144 | marg_top = Math.round(top + h_compare); 145 | } 146 | 147 | var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop()); 148 | var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0; 149 | 150 | if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){ 151 | if(t_class == "_top" || t_class == "_bottom"){ 152 | t_class = "_top"; 153 | } else { 154 | t_class = t_class+"_top"; 155 | } 156 | arrow_top = tip_h; 157 | marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset)); 158 | } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){ 159 | if(t_class == "_top" || t_class == "_bottom"){ 160 | t_class = "_bottom"; 161 | } else { 162 | t_class = t_class+"_bottom"; 163 | } 164 | arrow_top = -12; 165 | marg_top = Math.round(top + org_height + opts.edgeOffset); 166 | } 167 | 168 | if(t_class == "_right_top" || t_class == "_left_top"){ 169 | marg_top = marg_top + 5; 170 | } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){ 171 | marg_top = marg_top - 5; 172 | } 173 | if(t_class == "_left_top" || t_class == "_left_bottom"){ 174 | marg_left = marg_left + 5; 175 | } 176 | tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"}); 177 | tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class); 178 | 179 | if (timeout){ clearTimeout(timeout); } 180 | timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay); 181 | } 182 | 183 | function deactive_tiptip(){ 184 | opts.exit.call(this); 185 | if (timeout){ clearTimeout(timeout); } 186 | tiptip_holder.fadeOut(opts.fadeOut); 187 | } 188 | } 189 | }); 190 | } 191 | })(jQuery); -------------------------------------------------------------------------------- /tile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/star2dev/Google-plus-buttons/a87b721630379a204ffcb86184921c306feb2d56/tile.jpg -------------------------------------------------------------------------------- /tiptip.css: -------------------------------------------------------------------------------- 1 | /* TipTip CSS - Version 1.2 (Modified) */ 2 | 3 | #tiptip_holder { 4 | display: none; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | z-index: 99999; 9 | } 10 | 11 | #tiptip_holder.tip_top { 12 | padding-bottom: 5px; 13 | } 14 | 15 | #tiptip_holder.tip_bottom { 16 | padding-top: 5px; 17 | } 18 | 19 | #tiptip_holder.tip_right { 20 | padding-left: 5px; 21 | } 22 | 23 | #tiptip_holder.tip_left { 24 | padding-right: 5px; 25 | } 26 | 27 | #tiptip_content { 28 | font: bold 11px Helvetica, Arial, sans-serif; 29 | color: #FFF; 30 | padding: 7px; 31 | background: #000; 32 | border: 1px solid #FFF; 33 | } 34 | 35 | #tiptip_arrow, #tiptip_arrow_inner { 36 | position: absolute; 37 | border-color: transparent; 38 | border-style: solid; 39 | border-width: 6px; 40 | height: 0; 41 | width: 0; 42 | } 43 | 44 | #tiptip_holder.tip_top #tiptip_arrow { 45 | border-top-color: #fff; 46 | } 47 | 48 | #tiptip_holder.tip_bottom #tiptip_arrow { 49 | border-bottom-color: #fff; 50 | } 51 | 52 | #tiptip_holder.tip_right #tiptip_arrow { 53 | border-right-color: #fff; 54 | } 55 | 56 | #tiptip_holder.tip_left #tiptip_arrow { 57 | border-left-color: #fff; 58 | } 59 | 60 | #tiptip_holder.tip_top #tiptip_arrow_inner { 61 | margin-top: -7px; 62 | margin-left: -6px; 63 | border-top-color: #000; 64 | } 65 | 66 | #tiptip_holder.tip_bottom #tiptip_arrow_inner { 67 | margin-top: -5px; 68 | margin-left: -6px; 69 | border-bottom-color: #000; 70 | } 71 | 72 | #tiptip_holder.tip_right #tiptip_arrow_inner { 73 | margin-top: -6px; 74 | margin-left: -5px; 75 | border-right-color: #000; 76 | } 77 | 78 | #tiptip_holder.tip_left #tiptip_arrow_inner { 79 | margin-top: -6px; 80 | margin-left: -7px; 81 | border-left-color: #000; 82 | } 83 | 84 | /* Webkit Hacks */ 85 | @media screen and (-webkit-min-device-pixel-ratio:0) { 86 | #tiptip_content { 87 | padding: 4px 8px 5px 8px; 88 | background-color: #000; 89 | } 90 | #tiptip_holder.tip_bottom #tiptip_arrow_inner { 91 | border-bottom-color: #000; 92 | } 93 | #tiptip_holder.tip_top #tiptip_arrow_inner { 94 | border-top-color: #000; 95 | } 96 | } --------------------------------------------------------------------------------