按钮的css样式，想要作个美观一点的按钮，使用:after伪类选择器在按钮后跟随"!!"的符号，但点击按钮时按钮的值内容动，但跟随的"!!"符合不动，这样看起来很难受，就尝试让"!!"也动起来，经过测试发现，只要将按钮的css样式设定为相对定位即可。这可能也是基础没有理解透彻导致的。
/*使用相对定位控制跟随内容是否会随这按钮一起跳动*/
position: relative;
.button{ height: 30px; width: 65px; border:1px solid #64c878; background: -webkit-linear-gradient(top,#90dfa2,#84d494); background: -moz-linear-gradient(top,#90dfa2,#84d494); background: linear-gradient(#90dfa2,#84d494); text-align: left; /*使用相对定位控制跟随内容是否会随这按钮一起跳动*/ position: relative; /* 对按钮圆边角的设置 border-radius: 0px 100px 100px 0px;*/ } .button:after{ position: absolute; content:‘!!‘; color: #b82929; margin-left: 10px; box-shadow: inset; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); transform:rotate(-90deg); } .button:active{ top: 1px; box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff; background-color: #000c0c; background: -webkit-linear-gradient(top, #df4e58,#84d494); background: -moz-linear-gradient(top,#df4e58,#84d494); background: linear-gradient(#df4e58,#84d494); }
按钮
<button type="submit" class="button" >登录</button>
效果如下：
原文：http://www.cnblogs.com/gynbk/p/6690298.html