按钮的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);    }

按钮 登录

 效果如下：

登录