, - . - ! , HTML5, CSS3, PHP MySql .
- .
, . , .
CSS /

CSS3

  • , 9 2011, 00:36 |
  • : fiamma |
  • : 4229 |
  • : 1 |
  • :
   CSS3 CSS 3. , - class . javascript. ))


" " , "


....


. HTML
, , , class. :
<a href="#" class="button blue big">Download</a>
<a href="#" class="button blue medium">Submit</a>
<a href="#" class="button small blue rounded">Submit</a>

4 - , , . ( . .) - , , .

, .

, . :
   CSS3


. CSS
CSS buttons.css

:
, .. 3- . , ( style.css) . .


buttons.css
01.button{
02font:15px Calibri, Arial, sans-serif;
03
04/* A semi-transparent text shadow */
05text-shadow:1px 1px 0 rgba(255,255,255,0.4);
06
07/* Overriding the default underline styling of the links */
08text-decoration:none !important;
09white-space:nowrap;
10
11display:inline-block;
12vertical-align:baseline;
13position:relative;
14cursor:pointer;
15padding:10px 20px;
16
17background-repeat:no-repeat;
18
19/* The following two rules are fallbacks, in case
20 the browser does not support multiple backgrounds. */
21
22background-position:bottom left;
23background-image:url('button_bg.png');
24
25/* CSS3 background positioning property with multiple values. The background
26 images themselves are defined in the individual color classes */
27
28background-position:bottom left, top right, 0 0, 0 0;
29background-clip:border-box;
30
31/* Applying a default border radius of 8px */
32
33-moz-border-radius:8px;
34-webkit-border-radius:8px;
35border-radius:8px;
36
37/* A 1px highlight inside of the button */
38
39-moz-box-shadow:0 0 1px #fff inset;
40-webkit-box-shadow:0 0 1px #fff inset;
41box-shadow:0 0 1px #fff inset;
42
43/* Animating the background positions with CSS3 */
44/* Currently works only in Safari/Chrome */
45
46-webkit-transition:background-position 1s;
47-moz-transition:background-position 1s;
48-o-transition:background-position 1s;
49transition:background-position 1s;
50}
51
52.button:hover{
53
54/* The first rule is a fallback, in case the browser
55 does not support multiple backgrounds
56*/
57
58background-position:top left;
59background-position:top left, bottom right, 0 0, 0 0;
60}


, , "Button". , .

, . , , (, ), .

, . , - . :
   CSS3
+ .


. . :
01/* The three buttons sizes */
02
03.button.big{ font-size:30px;}
04.button.medium{ font-size:18px;}
05.button.small{ font-size:13px;}
06
07/* A more rounded button */
08
09.button.rounded{
10-moz-border-radius:4em;
11-webkit-border-radius:4em;
12border-radius:4em;
13}

big, small medium .

. :
/* BlueButton */
02
03.blue.button{
04color:#0f4b6d !important;
05
06border:1px solid #84acc3 !important;
07
08/* A fallback background color */
09background-color: #48b5f2;
10
11/* Specifying a version with gradients according to */
12
13background-image:url('button_bg.png'), url('button_bg.png'),
14-moz-radial-gradient(center bottom, circle,
15rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
16-moz-linear-gradient(#4fbbf7, #3faeeb);
17
18background-image:url('button_bg.png'), url('button_bg.png'),
19-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,
20from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
21-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
22}
23
24.blue.button:hover{
25background-color:#63c7fe;
26
27background-image:url('button_bg.png'), url('button_bg.png'),
28-moz-radial-gradient(center bottom, circle,
29 rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
30-moz-linear-gradient(#63c7fe, #58bef7);
31
32background-image:url('button_bg.png'), url('button_bg.png'),
33-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,
34from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
35-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
36}

, . - , . ?

Mozilla WebKit , , .

..
- css3-buttons.zip [21.1 Kb] (c: 183)
  •  CSS,