source: branches/version-2_5-dev/html/user_data/packages/sphone/css/button.css @ 19858

Revision 19858, 6.0 KB checked in by yomoro, 13 years ago (diff)

スマートフォンのカート画面以降のレイアウト微調整・ボタンのcss化

Line 
1@charset "utf-8";
2
3/* スマートフォン用グラデーションボタン
4----------------------------------------------- */
5.spbtn {
6display: block;
7margin: 0.5em auto 0.3em;
8padding: 0.4em 0;
9font: bold large helvetica;
10text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
11vertical-align: middle;
12text-align:center;
13text-decoration: none;
14color: #ffffff;
15background-color: #666666;
16background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
17border: solid 2px #666666;
18-webkit-border-radius: 8px;
19-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
20}
21.spbtn:before {
22content: "";
23display: block;
24height: 0;
25clear: both;
26visibility: hidden;
27}
28a.spbtn {
29width: 79%;
30max-width: 236px;
31}
32input.spbtn {
33width: 80%;
34max-width: 240px;
35}
36
37/* ボタン大(汎用)
38----------------------------------------------- */
39.spbtn-normal {
40color: #ffffff;
41border: solid 2px #666666;
42background-color: #666666;
43background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
44}
45
46/* ボタン大(承諾、送信)
47----------------------------------------------- */
48.spbtn-agree {
49color: #ffffff;
50border: solid 2px #666666;
51background-color: #8DCB66;
52background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
53}
54
55/* ボタン大(キャンセル、退会)
56----------------------------------------------- */
57.spbtn-cancel {
58color: #ffffff;
59border: solid 2px #666666;
60background-color: #fc4743;
61background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
62}
63
64/* ボタン中(お問い合わせ、友達に教える)
65----------------------------------------------- */
66.spbtn-medeum {
67display: block;
68margin: 0.5em auto 0.3em;
69font: bold 15px helvetica;
70border: solid 1px #666666;
71text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
72-webkit-border-radius: 6px;
73-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
74}
75a.spbtn-medeum {
76width: 59%;
77max-width: 178px;
78}
79input.spbtn-medeum {
80width: 60%;
81max-width: 180px;
82}
83
84/* ボタン小(お気に入りに登録、住所自動入力)
85----------------------------------------------- */
86.spbtn-small {
87display: inline-block;
88margin: 0;
89padding: 0.2em 0.4em;
90color: #ffffff;
91text-shadow: 0px -1px 1px rgba(0,0,0,1);
92font: bold 13px helvetica;
93font-weight: bold;
94background-color: #666666;
95background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
96text-align:center;
97vertical-align: middle;
98text-decoration: none;
99border: solid 1px #333333;
100-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
101}
102
103
104/* ×ボタン (お気に入りから削除)
105----------------------------------------------- */
106.spbtn-delete {
107display: inline-block;
108line-height: 1em;
109width: 1em;
110height: 1em;
111margin: 0;
112margin-left: 5px;
113padding: 0;
114color: #ffffff;
115text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
116font-family: verdana;
117font-weight: bold;
118background-color: #333333;
119background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
120text-align:center;
121vertical-align: middle;
122text-decoration: none;
123-webkit-border-radius: 4px;
124border: solid 1px #666666;
125}
126
127/* ログイン・会員登録・マイページボタン
128----------------------------------------------- */
129#block-login .spbtn{
130color:#292929;
131text-shadow: 1px 1px 1px #cccccc;
132float: left;
133font-size: medium;
134background-color: #c9c9c9;
135background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
136margin: 0;
137margin-left: -1px;
138border: none;
139border-left: 1px solid #818181;
140-webkit-border-radius: 0px;
141-webkit-box-shadow: none;
142}
143#block-login .spbtn:first-child{
144width: 50%;
145border-left: none;
146margin-left: 0px;
147-webkit-border-top-left-radius: 4px;
148-webkit-border-bottom-left-radius: 4px;
149}
150#block-login .spbtn:last-child{
151width: 50%;
152-webkit-border-top-right-radius: 4px;
153-webkit-border-bottom-right-radius: 4px;
154}
155#block-login .spbtn:only-child{
156width: 100%;
157max-width: 100%;
158-webkit-border-radius: 4px;
159}
160#block-login .spbtn > a{
161
162}
163
164
165/* 「TOPへ」ボタン
166----------------------------------------------- */
167#btn-top {
168display:block;
169position: absolute;
170top: 4px;
171right: 0.4em;
172font: bold 12px helvetica;
173width: 4.3em;
174border: 1px solid rgba(0,0,0,0.5);
175border-top: 1px solid rgba(0,0,0,0.7);
176background-color: rgba(51,51,51,0.2);
177background-color: #333332;
178background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.01)), color-stop(.02,rgba(255,255,255,0.4)),color-stop(.5,rgba(255,255,255,0.3)));
179-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
180vertical-align: middle;
181text-align: center;
182text-decoration: none;
183-webkit-border-radius: 5px;
184}
185#btn-top > a {
186display: block;
187margin-top: 0.5em;
188margin-bottom: 0.5em;
189color: #ffffff;
190font: bold 12px helvetica;
191text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
192vertical-align: middle;
193text-decoration: none;
194}
195
196/* ショッピング関連ボタン
197----------------------------------------------- */
198.spbtn-shopping {
199display: block;
200margin: 0.5em auto 0.3em;
201font: bold 15px helvetica;
202border: solid 1px #666666;
203text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
204color: #ffffff;
205background-color: #fc4743;
206background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
207-webkit-border-radius: 6px;
208-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
209}
210a.spbtn-shopping {
211width: 59%;
212max-width: 178px;
213}
214input.spbtn-shopping {
215width: 60%;
216max-width: 180px;
217}
Note: See TracBrowser for help on using the repository browser.