CSS CSS3谷歌按钮

Posted 2021-05-23

button.g-button, a.g-button, input[type=submit].g-button { padding: 6px 10px; -webkit-border-radius: 2px 2px; border: solid 1px rgb(153, 153, 153); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221))); color: #333; text-decoration: none; cursor: pointer; display: inline-block; text-align: center; text-shadow: 0px 1px 1px rgba(255,255,255,1); line-height: 1; }
		.g-button:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), to(rgb(221, 221, 221))); }
		.g-button:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(204, 204, 204)), to(rgb(221, 221, 221))); }
		.g-button.large { padding: 12px 20px; font-size: 21px; font-weight: bold; }
		.g-button.scaled { -webkit-transform: scale(2); -webkit-transform-origin: bottom left; }
		
		.g-button.blue { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227))); border-color: rgb(98,202,227);  }
		.g-button.green { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(213,224,77))); border-color: rgb(213,224,77);  }
		.g-button.red { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(241,93,34)), to(rgb(146,60,6))); border-color: rgb(146,60,6); text-shadow: 0px -1px 1px rgba(0,0,0,0.5); color: #fff; }
		.g-button.purple { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(202,0,108)), to(rgb(124,0,64))); border-color: rgb(202,0,108); text-shadow: 0px -1px 1px rgba(0,0,0,0.5); color: #fff;  }
		.g-button.orange { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(245,132,38))); border-color: rgb(245,132,38);  }