CSS3 笔记五（Buttons）

Some examples

1> Input width animation

Search:

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 input[type=text] {
 6   width: 100px;
 7   -webkit-transition: ease-in-out, width .35s ease-in-out;
 8   transition: ease-in-out,width .35s ease-in-out;
 9 }
10 input[type=text]:focus {
11   width: 250px;
12 }
13 </style>
14 </head>
15 <body>
16 Search: <input type="text" name="search" placeholder="click here">
17 </body>
18 </html>

View Code

2> Shadow Effect

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6     background-color: #4CAF50; /* Green */
 7     border: none;
 8     color: white;
 9     padding: 15px 32px;
10     text-align: center;
11     text-decoration: none;
12     display: inline-block;
13     font-size: 16px;
14     margin: 4px 2px;
15     cursor: pointer;
16     -webkit-transition-duration: 0.4s; /* Safari */
17     transition-duration: 0.4s;
18 }
19 
20 .button1 {
21     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
22 }
23 
24 .button2:hover {
25     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
26 }
27 </style>
28 </head>
29 <body>
30     <button class="button button1">Shadow Button</button>
31     <button class="button button2">Shadow on Hover</button>
32 </body>
33 </html>

View Code

3> Button Groups1

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6     background-color: #4CAF50; /* Green */
 7     border: none;
 8     color: white;
 9     padding: 15px 32px;
10     text-align: center;
11     text-decoration: none;
12     display: inline-block;
13     font-size: 16px;
14     cursor: pointer;
15     float: left;
16 }
17 
18 .button:hover {
19     background-color: #3e8e41;
20 }
21 </style>
22 </head>
23 <body>
24     <button class="button">Button</button>
25     <button class="button">Button</button>
26     <button class="button">Button</button>
27     <button class="button">Button</button>
28 </body>
29 </html>

View Code

4> Button Groups2

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6     background-color: #4CAF50; /* Green */
 7     border: 1px solid green;
 8     color: white;
 9     padding: 15px 32px;
10     text-align: center;
11     text-decoration: none;
12     display: inline-block;
13     font-size: 16px;
14     cursor: pointer;
15     float: left;
16 }
17 
18 .button:hover {
19     background-color: #3e8e41;
20 }
21 </style>
22 </head>
23 <body>
24     <button class="button">Button</button>
25     <button class="button">Button</button>
26     <button class="button">Button</button>
27     <button class="button">Button</button>
28 </body>
29 </html>

View Code

5> Animated Button

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6   display: inline-block;
 7   border-radius: 4px;
 8   background-color: #f4511e;
 9   border: none;
10   color: #FFFFFF;
11   text-align: center;
12   font-size: 28px;
13   padding: 20px;
14   width: 200px;
15   transition: all 0.5s;
16   cursor: pointer;
17   margin: 5px;
18 }
19 
20 .button span {
21   cursor: pointer;
22   display: inline-block;
23   position: relative;
24   transition: 0.5s;
25 }
26 
27 .button span:after {
28   content: '»';
29   position: absolute;
30   opacity: 0;
31   top: 0;
32   right: -20px;
33   transition: 0.5s;
34 }
35 
36 .button:hover span {
37   padding-right: 25px;
38 }
39 
40 .button:hover span:after {
41   opacity: 1;
42   right: 0;
43 }
44 </style>
45 </head>
46 <body>
47 
48 <button class="button" style="vertical-align:middle"><span>Hover </span></button>
49 
50 </body>
51 </html>

View Code

6> Ripple Effect

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6     position: relative;
 7     background-color: #4CAF50;
 8     border: none;
 9     font-size: 28px;
10     color: #FFFFFF;
11     padding: 20px;
12     width: 200px;
13     text-align: center;
14     -webkit-transition-duration: 0.4s; /* Safari */
15     transition-duration: 0.4s;
16     text-decoration: none;
17     overflow: hidden;
18     cursor: pointer;
19 }
20 
21 .button:after {
22     content: "";
23     background: #90EE90;
24     display: block;
25     position: absolute;
26     padding-top: 300%;
27     padding-left: 350%;
28     margin-left: -20px!important;
29     margin-top: -120%;
30     opacity: 0;
31     transition: all 0.8s
32 }
33 
34 .button:active:after {
35     padding: 0;
36     margin: 0;
37     opacity: 1;
38     transition: 0s
39 }
40 </style>
41 </head>
42 <body>
43 
44 <button class="button">Click Me</button>
45 
46 </body>
47 </html>

View Code

7> Pressed Effect

Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .button {
 6   display: inline-block;
 7   padding: 15px 25px;
 8   font-size: 24px;
 9   cursor: pointer;
10   text-align: center;    
11   text-decoration: none;
12   outline: none;
13   color: #fff;
14   background-color: #4CAF50;
15   border: none;
16   border-radius: 15px;
17   box-shadow: 0 9px #999;
18 }
19 
20 .button:hover {background-color: #3e8e41}
21 
22 .button:active {
23   background-color: #3e8e41;
24   box-shadow: 0 5px #666;
25   transform: translateY(4px);
26 }
27 </style>
28 </head>
29 <body>
30 　　　<button class="button">Click Me</button>
31 </body>
32 </html>

View Code