button { color:#444444; background:#F3F3F3; border:1px #DADADA solid; padding:5px 10px; border-radius:2px; font-weight:bold; font-size:9pt; outline:none; } button:hover { border:1px #C6C6C6 solid; box-shadow:1px 1px 1px #EAEAEA; color:#333333; background:#F7F7F7; } button:active { box-shadow:inset 1px 1px 1px #DFDFDF; } /* Blue button as seen on translate.google.com*/ button.blue { color:white; background:#4C8FFB; border:1px #3079ED solid; box-shadow:inset 0 1px 0 #80B0FB; } button.blue:hover { border:1px #2F5BB7 solid; box-shadow:0 1px 1px #EAEAEA,inset 0 1px 0 #5A94F1; background:#3F83F1; } button.blue:active { box-shadow:inset 0 2px 5px #2370FE; } /* Orange button as seen on blogger.com*/ button.orange { color:white; border:1px solid #FB8F3D; background:-webkit-linear-gradient(top,#FDA251,#FB8F3D); background:-moz-linear-gradient(top,#FDA251,#FB8F3D); background:-ms-linear-gradient(top,#FDA251,#FB8F3D); } button.orange:hover { border:1px solid #EB5200; background:-webkit-linear-gradient(top,#FD924C,#F9760B); background:-moz-linear-gradient(top,#FD924C,#F9760B); background:-ms-linear-gradient(top,#FD924C,#F9760B); box-shadow:0 1px #EFEFEF; } button.orange:active { box-shadow:inset 0 1px 1px rgba(0,0,0,0.3); } /* Red Google Button as seen on drive.google.com */ button.red { background:-webkit-linear-gradient(top,#DD4B39,#D14836); background:-moz-linear-gradient(top,#DD4B39,#D14836); background:-ms-linear-gradient(top,#DD4B39,#D14836); border:1px solid #DD4B39; color:white; text-shadow:0 1px 0 #C04131; } button.red:hover { background:-webkit-linear-gradient(top,#DD4B39,#C53727); background:-moz-linear-gradient(top,#DD4B39,#C53727); background:-ms-linear-gradient(top,#DD4B39,#C53727); border:1px solid #AF301F; } button.red:active { box-shadow:inset 0 1px 1px rgba(0,0,0,0.2); background:-webkit-linear-gradient(top,#D74736,#AD2719); background:-moz-linear-gradient(top,#D74736,#AD2719); background:-ms-linear-gradient(top,#D74736,#AD2719); } /*=======================================*/ body { margin:50px; } h1 { font:150%/150% 'Freckle Face',cursive; }
google buttons 默认的按钮特效
color:#444444; background:#f3f3f3; border:1px #dadada solid; padding:5px 10px; border-radius:2px; font-weight:bold; font-size:9pt; outline:none;