1 .button{ 2 width: 80px; 3 line-height: 25px; 4 text-align: center; 5 font-weight:500; 6 color: #fff; 7 text-shadow:1px 1px 1px #333; 8 border-radius: 5px; 9 margin:0 20px 20px 0; 10 position: relative; 11 overflow: hidden; 12 font-size:18px; 13 } 14 .button:nth-child(6n){ 15 margin-right: 0; 16 } 17 .button.gray{ 18 color: #8c96a0; 19 text-shadow:1px 1px 1px #fff; 20 border:1px solid #dce1e6; 21 box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset; 22 background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec); 23 background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec); 24 background: linear-gradient(top,#f2f3f7,#e4e8ec); 25 } 26 .round, 27 .side, 28 .tags{ 29 padding-right: 30px; 30 } 31 .round:after{ 32 position: absolute; 33 display: inline-block; 34 content: "\003c"; 35 top:50%; 36 right:10px; 37 margin-top: -10px; 38 width: 17px; 39 height: 20px; 40 padding-left: 3px; 41 line-height:18px; 42 font-size: 10px; 43 font-weight: normal; 44 border-radius: 10px; 45 text-shadow:-2px 0 1px #333; 46 -webkit-transform:rotate(-90deg); 47 -moz-transform:rotate(-90deg); 48 transform:rotate(-90deg); 49 } 50 .gray.round:after{ 51 box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2); 52 background:-webkit-linear-gradient(top,#dce1e6,#dde2e7); 53 background:-moz-linear-gradient(top,#dce1e6,#dde2e7); 54 background:linear-gradient(top,#dce1e6,#dde2e7); 55 text-shadow:-2px 0 1px #fff; 56 } 57 .side:after{ 58 position: absolute; 59 display: inline-block; 60 content: "\00bb"; 61 top:3px; 62 right:-4px; 63 width: 38px; 64 height:30px; 65 font-weight: normal; 66 line-height: 26px; 67 border-radius:0 0 5px 5px; 68 text-shadow:-2px 0 1px #333; 69 -webkit-transform:rotate(-90deg); 70 -moz-transform:rotate(-90deg); 71 transform:rotate(-90deg); 72 } 73 .gray.side:after{ 74 text-shadow:-2px 0 1px #fff; 75 border-top: 1px solid #d4d4d4; 76 box-shadow:-2px 0 1px #eceef1 inset; 77 background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%); 78 background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%); 79 background:linear-gradient(right,#e1e6ea,#f2f2f6 60%); 80 } 81 82 .tags:after{ 83 font-weight: normal; 84 position: absolute; 85 display: inline-block; 86 content: "FREE"; 87 top:-3px; 88 right: -33px; 89 color: #fff; 90 text-shadow:none; 91 width: 85px; 92 height:25px; 93 line-height: 28px; 94 -webkit-transform:rotate(45deg) scale(.7,.7); 95 -moz-transform:rotate(45deg) scale(.7,.7); 96 transform:rotate(45deg) scale(.7,.7); 97 } 98 .gray.tags:after{ 99 background: #8c96a0; 100 border:2px solid #fff; 101 } 102 103 .button.rarrow, 104 .button.larrow{ 105 overflow:visible; 106 } 107 .rarrow:after, 108 .rarrow:before, 109 .larrow:after, 110 .larrow:before{ 111 position:absolute; 112 content: ""; 113 display: block; 114 width: 28px; 115 height: 28px; 116 -webkit-transform:rotate(45deg); 117 -moz-transform:rotate(45deg); 118 transform:rotate(45deg); 119 } 120 .rarrow:before{ 121 width: 27px; 122 height: 27px; 123 top: 6px; 124 right: -13px; 125 clip: rect(auto auto 26px 2px); 126 } 127 .rarrow:after{ 128 top: 6px; 129 right: -12px; 130 clip: rect(auto auto 26px 2px); 131 } 132 .gray.rarrow:before{ 133 background: #d6dbe0; 134 } 135 .gray.rarrow:after{ 136 box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset; 137 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec); 138 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec); 139 background:linear-gradient(top left,#f2f3f7,#e4e8ec); 140 } 141 142 .larrow:before{ 143 top: 6px; 144 left: -13px; 145 width: 27px; 146 height: 27px; 147 clip: rect(2px 26px auto auto); 148 } 149 .larrow:after{ 150 top: 6px; 151 left: -12px; 152 clip: rect(2px 26px auto auto); 153 } 154 .gray.larrow:before{ 155 background: #d6dbe0; 156 } 157 .gray.larrow:after{ 158 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset; 159 background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec); 160 background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec); 161 background:linear-gradient(top left,#f2f3f7,#e4e8ec); 162 } 163 164 .gray:hover{ 165 background: -webkit-linear-gradient(top,#fefefe,#ebeced); 166 background: -moz-linear-gradient(top,#f2f3f7,#ebeced); 167 background: linear-gradient(top,#f2f3f7,#ebeced); 168 } 169 170 .gray.side:hover:after{ 171 background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%); 172 background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%); 173 background:linear-gradient(right,#e7ebee,#f8f8f8 60%); 174 } 175 176 .gray.rarrow:hover:after, 177 .gray.rarrow:hover:after{ 178 background:-webkit-linear-gradient(top left,#fefefe,#ebeced); 179 background:-moz-linear-gradient(top left,#fefefe,#ebeced); 180 background:linear-gradient(top left,#fefefe,#ebeced); 181 } 182 .gray:active{ 183 top:1px; 184 box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff; 185 background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec); 186 background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec); 187 background: linear-gradient(top,#e4e8ec,#e4e8ec); 188 } 189 .gray.rarrow:active:after, 190 .gray.larrow:active:after{ 191 background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec); 192 background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec); 193 background:linear-gradient(top left,#e4e8ec,#e4e8ec); 194 } 195 196 .gray.rarrow:active:after{ 197 box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset; 198 } 199 .gray.larrow:active:after{ 200 box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset; 201 }
1 <button type="button" class="button gray">提交</button>
1 input[type="text"]{transition: border 0.5s;border-radius:5px 5px 5px 5px; height:20px; width:200px;} 2 input:focus{ 3 animation: myfirst 1s linear 1s infinite alternate; 4 /* Firefox: */ 5 -moz-animation: myfirst 1s linear 1s infinite alternate; 6 /* Safari 和 Chrome: */ 7 -webkit-animation: myfirst 1s linear 1s infinite alternate; 8 /* Opera: */ 9 -o-animation: myfirst 1s linear 1s infinite alternate;} 10 11 @-webkit-keyframes myfirst /* Safari 和 Chrome */ 12 { 13 0% {box-shadow: 0 0 0 #fff;} 14 100% {box-shadow: 0 0 10px #0CF;} 15 }