css按钮按下改按钮颜色_构建踢屁股实用CSS3按钮

最新推荐文章于 2022-03-24 22:51:08 发布

翻译最新推荐文章于 2022-03-24 22:51:08 发布 · 405 阅读

文章标签：

#css #html #css3 #js #web #ViewUI

本文介绍如何使用CSS3特性，如背景渐变、边框半径和阴影，来创建美观且响应式的按钮，无需依赖图像资源。通过实际代码示例，展示了按钮在不同状态下的样式变化。

css按钮按下改按钮颜色

曾经需要的背景图像和图标现在可以使用普通CSS创建。因为现代浏览器可以访问诸如框阴影，渐变，圆角，文本阴影和字体等内容，所以我们最终可以在创建视觉元素（例如按钮）时利用此优势并消除对图像的任何需求！

全屏播

最终密码

<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
	<meta charset="utf-8"> 
	<title>CSS3 Buttons</title> 
	<style> 
 
	/* CUSTOM FONT */ 
	@font-face { 
		font-family: 'EfonRegular'; 
		src: url('font/EFON-webfont.eot'); 
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg'); 
		font-weight: normal; 
		font-style: normal; 
	}	 
 
	body { 
	 width: 400px; 
	 margin: 200px auto; 
	 background: #666; 
	} 
 
	.button { 
	 width: 400px; 
	 height: 100px; 
	 line-height: 100px; 
	 color: white; 
	 text-decoration: none; 
	 font-size: 50px; 
	 font-family: helvetica, arial; 
	 font-weight: bold; 
	 display: block; 
	 text-align: center; 
	 position: relative; 
 
	 /* BACKGROUND GRADIENTS */ 
	 background: #014464; 
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); 
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));  
 
	 /* BORDER RADIUS */ 
	 -moz-border-radius: 10px; 
	 -webkit-border-radius: 10px; 
	 border-radius: 10px; 
 
	 border: 1px solid #368DBE; 
	 border-top: 1px solid #c3d6df; 
 
	 /* TEXT SHADOW */ 
 
	 text-shadow: 1px 1px 1px black; 
 
	 /* BOX SHADOW */ 
	 -moz-box-shadow: 0 1px 3px black; 
	 -webkit-box-shadow: 0 1px 3px black; 
	 box-shadow: 0 1px 3px black; 
	} 
 
	/* WHILE HOVERED */ 
	.button:hover { 
		background: #014464; 
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); 
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853)); 
	} 
 
	/* WHILE BEING CLICKED */ 
	.button:active { 
		-moz-box-shadow: 0 2px 6px black; 
		-webkit-box-shadow: 0 2px 6px black; 
	} 
	/* FONT GLYPH (MOSTLY FOR FUN) */ 
	.button:before { 
		font-family: EfonRegular; 
		content: 'v'; 
		color: #09232F; 
		font-size: 90px; 
		float: left; 
		margin-left: 35px; 
		margin-right: -10px; 
		text-shadow: 0 1px 0 #4190AF; 
	} 
 
	</style> 
</head> 
<body> 
     <a href="#" class="button"> Follow Me </a> 
 
</body> 
</html>

结论

事实是，对Twitter-bird图标使用微小的图像可能会更聪明。但是，目标是使用所有CSS达到这种效果！你怎么看？

翻译自: https://code.tutsplus.com/tutorials/build-kick-ass-practical-css3-buttons--net-11702

css按钮按下改按钮颜色