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 }
