好看的css3按钮和文本框

 .button{
 width: 80px;
 line-height: 25px;
 text-align: center;
 font-weight:;
 color: #fff;
 text-shadow:1px 1px 1px #333;
 border-radius: 5px;
 margin:0 20px 20px 0;
 position: relative;
 overflow: hidden;
 font-size:18px;
 }
 .button:nth-child(6n){
 margin-right:;
 }
 .button.gray{
 color: #8c96a0;
 text-shadow:1px 1px 1px #fff;
 border:1px solid #dce1e6;
 box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
 background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
 background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
 background: linear-gradient(top,#f2f3f7,#e4e8ec);
 }
 .round,
     .side,
     .tags{
 padding-right: 30px;
 }
 .round:after{
 position: absolute;
 display: inline-block;
 content: "\003c";
 top:50%;
 right:10px;
 margin-top: -10px;
 width: 17px;
 height: 20px;
 padding-left: 3px;
 line-height:18px;
 font-size: 10px;
 font-weight: normal;
 border-radius: 10px;
 text-shadow:-2px 0 1px #333;
 -webkit-transform:rotate(-90deg);
 -moz-transform:rotate(-90deg);
 transform:rotate(-90deg);
 }
 .gray.round:after{
 box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
 background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
 background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
 background:linear-gradient(top,#dce1e6,#dde2e7);
 text-shadow:-2px 0 1px #fff;
 }
 .side:after{
 position: absolute;
 display: inline-block;
 content: "\00bb";
 top:3px;
 right:-4px;
 width: 38px;
 height:30px;
 font-weight: normal;
 line-height: 26px;
 border-radius:0 0 5px 5px;
 text-shadow:-2px 0 1px #333;
 -webkit-transform:rotate(-90deg);
 -moz-transform:rotate(-90deg);
 transform:rotate(-90deg);
 }
 .gray.side:after{
 text-shadow:-2px 0 1px #fff;
 border-top: 1px solid #d4d4d4;
 box-shadow:-2px 0 1px #eceef1 inset;
 background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
 background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
 background:linear-gradient(right,#e1e6ea,#f2f2f6 60%);
 }

 .tags:after{
 font-weight: normal;
 position: absolute;
 display: inline-block;
 content: "FREE";
 top:-3px;
 right: -33px;
 color: #fff;
 text-shadow:none;
 width: 85px;
 height:25px;
 line-height: 28px;
 -webkit-transform:rotate(45deg) scale(.7,.7);
 -moz-transform:rotate(45deg) scale(.7,.7);
 transform:rotate(45deg) scale(.7,.7);
 }
 .gray.tags:after{
 background: #8c96a0;
 border:2px solid #fff;
 }

 .button.rarrow,
     .button.larrow{
 overflow:visible;
 }
 .rarrow:after,
     .rarrow:before,
     .larrow:after,
     .larrow:before{
 position:absolute;
 content: "";
 display: block;
 width: 28px;
 height: 28px;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 transform:rotate(45deg);
 }
 .rarrow:before{
 width: 27px;
 height: 27px;
 top: 6px;
 right: -13px;
 clip: rect(auto auto 26px 2px);
 }
 .rarrow:after{
 top: 6px;
 right: -12px;
 clip: rect(auto auto 26px 2px);
 }
 .gray.rarrow:before{
 background: #d6dbe0;
 }
 .gray.rarrow:after{
 box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
 background:linear-gradient(top left,#f2f3f7,#e4e8ec);
 }

 .larrow:before{
 top: 6px;
 left: -13px;
 width: 27px;
 height: 27px;
 clip: rect(2px 26px auto auto);
 }
 .larrow:after{
 top: 6px;
 left: -12px;
 clip: rect(2px 26px auto auto);
 }
 .gray.larrow:before{
 background: #d6dbe0;
 }
 .gray.larrow:after{
 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
 background:linear-gradient(top left,#f2f3f7,#e4e8ec);
 }

 .gray:hover{
 background: -webkit-linear-gradient(top,#fefefe,#ebeced);
 background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
 background: linear-gradient(top,#f2f3f7,#ebeced);
 }

 .gray.side:hover:after{
 background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
 background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
 background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
 }

 .gray.rarrow:hover:after,
     .gray.rarrow:hover:after{
 background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
 background:-moz-linear-gradient(top left,#fefefe,#ebeced);
 background:linear-gradient(top left,#fefefe,#ebeced);
 }
 .gray:active{
 top:1px;
 box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
 background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
 background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
 background: linear-gradient(top,#e4e8ec,#e4e8ec);
 }
 .gray.rarrow:active:after,
     .gray.larrow:active:after{
 background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
 background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
 background:linear-gradient(top left,#e4e8ec,#e4e8ec);
 }

 .gray.rarrow:active:after{
 box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
 }
 .gray.larrow:active:after{
 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
 }

 <button type="button" class="button gray">提交</button>

 input[type="text"]{transition: border 0.5s;border-radius:5px 5px 5px 5px; height:20px; width:200px;}
 input:focus{
 animation: myfirst 1s linear 1s infinite alternate;
 /* Firefox: */
 -moz-animation: myfirst 1s linear 1s infinite alternate;
 /* Safari 和 Chrome: */
 -webkit-animation: myfirst 1s linear 1s infinite alternate;
 /* Opera: */
 -o-animation: myfirst 1s linear 1s infinite alternate;}

 @-webkit-keyframes myfirst /* Safari 和 Chrome */
 {
 0%   {box-shadow: 0 0 0 #fff;}
 100% {box-shadow: 0 0 10px #0CF;}
 }