Read Time:
12 min
() translation by (you can also view the original English article)
Hari ini kita akan mengkode Formulir Pendaftaran yang Elegan dari Orman Clark menggunakan CSS3 dan HTML5, ditambah beberapa animasi CSS dari Dan Eden untuk memperindah pengalamannya.
Tutorial ini mengasumsikan pemahaman tertentu tentang HTML/CSS dari Anda; kita akan bergerak cukup cepat. OK, mari kita pergi!
Langkah 1: Markup HTML
Kita memulai dengan menautkan ke stylesheet kita di dalam head dokumen kita. Kita memiliki stylesheet reset untuk mengembalikan semuanya ke awal, animate.css dari Dan Eden yang akan kita gunakan untuk beberapa animasi yang menyenangkan nantinya, dan style.css kita sendiri di mana kita akan membawa sebagian besar pekerjaan kita.
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>Login</title> |
12 |
|
13 |
<!-- CSS -->
|
14 |
|
15 |
<link rel="stylesheet" href="css/reset.css"> |
16 |
<link rel="stylesheet" href="css/animate.css"> |
17 |
<link rel="stylesheet" href="css/styles.css"> |
18 |
|
19 |
</head>
|
Daging dari HTML terdiri dari kontainer, formulir dan beberapa masukan.
1 |
|
2 |
<!-- Main HTML -->
|
3 |
|
4 |
<body>
|
5 |
|
6 |
<!-- Begin Page Content -->
|
7 |
|
8 |
<div id="container"> |
9 |
|
10 |
<form>
|
11 |
|
12 |
<label for="username">Username:</label> |
13 |
|
14 |
<input type="text" id="username" name="username"> |
15 |
|
16 |
<label for="password">Password:</label> |
17 |
|
18 |
<p><a href="#">Forgot your password?</a></p> |
19 |
|
20 |
<input type="password" id="password" name="password"> |
21 |
|
22 |
<div id="lower"> |
23 |
|
24 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
25 |
|
26 |
<input type="submit" value="Login"> |
27 |
|
28 |
</div><!--/ lower--> |
29 |
|
30 |
</form>
|
31 |
|
32 |
</div><!--/ container--> |
33 |
|
34 |
|
35 |
<!-- End Page Content -->
|
36 |
|
37 |
</body>
|
38 |
|
39 |
</html>
|
Langkah 3: Memosisikan Elemen-elemen
Sekarang setelah kita menulis markup HTML kita, kita dapat melanjutkan ke css. Pertama-tama kita akan menentukan dasar-dasarnya, memposisikan elemen kontainer kita di tengah halaman.
1 |
|
2 |
|
3 |
/* Basics */
|
4 |
|
5 |
html, body { |
6 |
width: 100%; |
7 |
height: 100%; |
8 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
9 |
color: #444; |
10 |
-webkit-font-smoothing: antialiased; |
11 |
background: #f0f0f0; |
12 |
|
13 |
}
|
14 |
|
15 |
#container { |
16 |
position: fixed; |
17 |
width: 340px; |
18 |
height: 280px; |
19 |
top: 50%; |
20 |
left: 50%; |
21 |
margin-top: -140px; |
22 |
margin-left: -170px; |
23 |
}
|
Sekarang kita akan menambahkan beberapa gaya struktural ke masukan dan elemen lainnya:
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
}
|
23 |
|
24 |
p a:hover { |
25 |
color: #555; |
26 |
}
|
27 |
|
28 |
input { |
29 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
30 |
font-size: 12px; |
31 |
outline: none; |
32 |
}
|
33 |
|
34 |
input[type=text], |
35 |
input[type=password] { |
36 |
color: #777; |
37 |
padding-left: 10px; |
38 |
margin: 10px; |
39 |
margin-top: 12px; |
40 |
margin-left: 18px; |
41 |
width: 290px; |
42 |
height: 35px; |
43 |
}
|
44 |
|
45 |
#lower { |
46 |
background: #ecf2f5; |
47 |
width: 100%; |
48 |
height: 69px; |
49 |
margin-top: 20px; |
50 |
}
|
51 |
|
52 |
input[type=checkbox] { |
53 |
margin-left: 20px; |
54 |
margin-top: 30px; |
55 |
}
|
56 |
|
57 |
.check { |
58 |
margin-left: 3px; |
59 |
}
|
60 |
|
61 |
input[type=submit] { |
62 |
float: right; |
63 |
margin-right: 20px; |
64 |
margin-top: 20px; |
65 |
width: 80px; |
66 |
height: 30px; |
67 |
}
|
Langkah 4: Penataan Elemen-elemen
Elemen-elemen diposisikan dengan sempurna. Sekarang saatnya membuat mereka terlihat cantik! Pertama-tama, kita akan menata kontainer dengan memberikan sudut yang dibulatkan secara halus dan bayangan kotak untuk kedalaman.
1 |
|
2 |
|
3 |
#container { |
4 |
position: fixed; |
5 |
width: 340px; |
6 |
height: 280px; |
7 |
top: 50%; |
8 |
left: 50%; |
9 |
margin-top: -140px; |
10 |
margin-left: -170px; |
11 |
background: #fff; |
12 |
border-radius: 3px; |
13 |
border: 1px solid #ccc; |
14 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
15 |
}
|
Kemudian masukan mendapat perlakuan serupa, dengan beberapa border radius dan bayangan kotak. Kita akan memberikan tombol kirim sebuah latar belakang gradien, dengan background-color solid untuk memenuhi IE9 dan yang sebelumnya. Perhatikan kami menargetkan setiap jenis masukan secara individual dengan penyeleksi atribut css.
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
}
|
23 |
|
24 |
p a:hover { |
25 |
color: #555; |
26 |
}
|
27 |
|
28 |
input { |
29 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
30 |
font-size: 12px; |
31 |
outline: none; |
32 |
}
|
33 |
|
34 |
input[type=text], |
35 |
input[type=password] { |
36 |
color: #777; |
37 |
padding-left: 10px; |
38 |
margin: 10px; |
39 |
margin-top: 12px; |
40 |
margin-left: 18px; |
41 |
width: 290px; |
42 |
height: 35px; |
43 |
border: 1px solid #c7d0d2; |
44 |
border-radius: 2px; |
45 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
46 |
}
|
47 |
|
48 |
#lower { |
49 |
background: #ecf2f5; |
50 |
width: 100%; |
51 |
height: 69px; |
52 |
margin-top: 20px; |
53 |
box-shadow: inset 0 1px 1px #fff; |
54 |
border-top: 1px solid #ccc; |
55 |
border-bottom-right-radius: 3px; |
56 |
border-bottom-left-radius: 3px; |
57 |
}
|
58 |
|
59 |
input[type=checkbox] { |
60 |
margin-left: 20px; |
61 |
margin-top: 30px; |
62 |
}
|
63 |
|
64 |
.check { |
65 |
margin-left: 3px; |
66 |
font-size: 11px; |
67 |
color: #444; |
68 |
text-shadow: 0 1px 0 #fff; |
69 |
}
|
70 |
|
71 |
input[type=submit] { |
72 |
float: right; |
73 |
margin-right: 20px; |
74 |
margin-top: 20px; |
75 |
width: 80px; |
76 |
height: 30px; |
77 |
font-size: 14px; |
78 |
font-weight: bold; |
79 |
color: #fff; |
80 |
background-color: #acd6ef; /*IE fallback*/ |
81 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
82 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
83 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
84 |
border-radius: 30px; |
85 |
border: 1px solid #66add6; |
86 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
87 |
cursor: pointer; |
88 |
}
|
Selanjutnya, untuk membantu umpan balik pengguna, kita dapat melakukannya dengan beberapa keadaan hover dan active:
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
-webkit-transition: all .4s ease; |
23 |
-moz-transition: all .4s ease; |
24 |
transition: all .4s ease; |
25 |
}
|
26 |
|
27 |
p a:hover { |
28 |
color: #555; |
29 |
}
|
30 |
|
31 |
input { |
32 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
33 |
font-size: 12px; |
34 |
outline: none; |
35 |
}
|
36 |
|
37 |
input[type=text], |
38 |
input[type=password] { |
39 |
color: #777; |
40 |
padding-left: 10px; |
41 |
margin: 10px; |
42 |
margin-top: 12px; |
43 |
margin-left: 18px; |
44 |
width: 290px; |
45 |
height: 35px; |
46 |
border: 1px solid #c7d0d2; |
47 |
border-radius: 2px; |
48 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
49 |
-webkit-transition: all .4s ease; |
50 |
-moz-transition: all .4s ease; |
51 |
transition: all .4s ease; |
52 |
}
|
53 |
|
54 |
input[type=text]:hover, |
55 |
input[type=password]:hover { |
56 |
border: 1px solid #b6bfc0; |
57 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
58 |
}
|
59 |
|
60 |
input[type=text]:focus, |
61 |
input[type=password]:focus { |
62 |
border: 1px solid #a8c9e4; |
63 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
64 |
}
|
65 |
|
66 |
#lower { |
67 |
background: #ecf2f5; |
68 |
width: 100%; |
69 |
height: 69px; |
70 |
margin-top: 20px; |
71 |
box-shadow: inset 0 1px 1px #fff; |
72 |
border-top: 1px solid #ccc; |
73 |
border-bottom-right-radius: 3px; |
74 |
border-bottom-left-radius: 3px; |
75 |
}
|
76 |
|
77 |
input[type=checkbox] { |
78 |
margin-left: 20px; |
79 |
margin-top: 30px; |
80 |
}
|
81 |
|
82 |
.check { |
83 |
margin-left: 3px; |
84 |
font-size: 11px; |
85 |
color: #444; |
86 |
text-shadow: 0 1px 0 #fff; |
87 |
}
|
88 |
|
89 |
input[type=submit] { |
90 |
float: right; |
91 |
margin-right: 20px; |
92 |
margin-top: 20px; |
93 |
width: 80px; |
94 |
height: 30px; |
95 |
font-size: 14px; |
96 |
font-weight: bold; |
97 |
color: #fff; |
98 |
background-color: #acd6ef; /*IE fallback*/ |
99 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
100 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
101 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
102 |
border-radius: 30px; |
103 |
border: 1px solid #66add6; |
104 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
105 |
cursor: pointer; |
106 |
}
|
107 |
|
108 |
input[type=submit]:hover { |
109 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
110 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
111 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
112 |
}
|
113 |
|
114 |
input[type=submit]:active { |
115 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
116 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
117 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
118 |
}
|
Langkah 5: Sentuhan Akhir
Formulir login kita terlihat bagus, tapi mari kita mendorong kapal keluar dan menambah pengalaman. Kita sekarang akan menambahkan beberapa animasi CSS dan transisi untuk memolesnya. Kita sudah mereferensi animate.css dari Dan Eden di head - kita sekarang dapat menggunakan jenis animasi yang telah ditentukan sebelumnya, seperti bounceIn, bersama dengan awalan browser yang sesuai.
Pertama, animasi kontainer:
1 |
|
2 |
#container { |
3 |
position: fixed; |
4 |
width: 340px; |
5 |
height: 280px; |
6 |
top: 50%; |
7 |
left: 50%; |
8 |
margin-top: -140px; |
9 |
margin-left: -170px; |
10 |
background: #fff; |
11 |
border-radius: 3px; |
12 |
border: 1px solid #ccc; |
13 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
14 |
-webkit-animation-name: bounceIn; |
15 |
-webkit-animation-fill-mode: both; |
16 |
-webkit-animation-duration: 1s; |
17 |
-webkit-animation-iteration-count: 1; |
18 |
-webkit-animation-timing-function: linear; |
19 |
-moz-animation-name: bounceIn; |
20 |
-moz-animation-fill-mode: both; |
21 |
-moz-animation-duration: 1s; |
22 |
-moz-animation-iteration-count: 1; |
23 |
-moz-animation-timing-function: linear; |
24 |
animation-name: bounceIn; |
25 |
animation-fill-mode: both; |
26 |
animation-duration: 1s; |
27 |
animation-iteration-count: 1; |
28 |
animation-timing-function: linear; |
29 |
}
|
Selanjutnya, transisi untuk elemen interaktif:
1 |
|
2 |
|
3 |
p a { |
4 |
font-size: 11px; |
5 |
color: #aaa; |
6 |
float: right; |
7 |
margin-top: -13px; |
8 |
margin-right: 20px; |
9 |
-webkit-transition: all .4s ease; |
10 |
-moz-transition: all .4s ease; |
11 |
transition: all .4s ease; |
12 |
}
|
13 |
|
14 |
input[type=text], |
15 |
input[type=password] { |
16 |
color: #777; |
17 |
padding-left: 10px; |
18 |
margin: 10px; |
19 |
margin-top: 12px; |
20 |
margin-left: 18px; |
21 |
width: 290px; |
22 |
height: 35px; |
23 |
border: 1px solid #c7d0d2; |
24 |
border-radius: 2px; |
25 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
26 |
-webkit-transition: all .4s ease; |
27 |
-moz-transition: all .4s ease; |
28 |
transition: all .4s ease; |
29 |
}
|
Langkah 6: Kode Akhir
Kita sudah selesai! Di bawah ini Anda akan menemukan kode final untuk Formulir Login Elegan kami, yang seharusnya memberi Anda sesuatu yang tampak sangat mirip dengan ini:
HTML:
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>Login</title> |
12 |
|
13 |
<!-- CSS -->
|
14 |
|
15 |
<link rel="stylesheet" href="css/reset.css"> |
16 |
<link rel="stylesheet" href="css/animate.css"> |
17 |
<link rel="stylesheet" href="css/styles.css"> |
18 |
|
19 |
</head>
|
20 |
|
21 |
<!-- Main HTML -->
|
22 |
|
23 |
<body>
|
24 |
|
25 |
<!-- Begin Page Content -->
|
26 |
|
27 |
<div id="container"> |
28 |
|
29 |
<form>
|
30 |
|
31 |
<label for="username">Username:</label> |
32 |
|
33 |
<input type="text" id="username" name="username"> |
34 |
|
35 |
<label for="password">Password:</label> |
36 |
|
37 |
<p><a href="#">Forgot your password?</a></p> |
38 |
|
39 |
<input type="password" id="password" name="password"> |
40 |
|
41 |
<div id="lower"> |
42 |
|
43 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
44 |
|
45 |
<input type="submit" value="Login"> |
46 |
|
47 |
</div><!--/ lower--> |
48 |
|
49 |
</form>
|
50 |
|
51 |
</div><!--/ container--> |
52 |
|
53 |
|
54 |
|
55 |
<!-- End Page Content -->
|
56 |
|
57 |
</body>
|
58 |
|
59 |
</html>
|
CSS:
1 |
|
2 |
|
3 |
/* Basics */
|
4 |
|
5 |
html, body { |
6 |
width: 100%; |
7 |
height: 100%; |
8 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
9 |
color: #444; |
10 |
-webkit-font-smoothing: antialiased; |
11 |
background: #f0f0f0; |
12 |
|
13 |
}
|
14 |
|
15 |
#container { |
16 |
position: fixed; |
17 |
width: 340px; |
18 |
height: 280px; |
19 |
top: 50%; |
20 |
left: 50%; |
21 |
margin-top: -140px; |
22 |
margin-left: -170px; |
23 |
background: #fff; |
24 |
border-radius: 3px; |
25 |
border: 1px solid #ccc; |
26 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
27 |
-webkit-animation-name: bounceIn; |
28 |
-webkit-animation-fill-mode: both; |
29 |
-webkit-animation-duration: 1s; |
30 |
-webkit-animation-iteration-count: 1; |
31 |
-webkit-animation-timing-function: linear; |
32 |
-moz-animation-name: bounceIn; |
33 |
-moz-animation-fill-mode: both; |
34 |
-moz-animation-duration: 1s; |
35 |
-moz-animation-iteration-count: 1; |
36 |
-moz-animation-timing-function: linear; |
37 |
animation-name: bounceIn; |
38 |
animation-fill-mode: both; |
39 |
animation-duration: 1s; |
40 |
animation-iteration-count: 1; |
41 |
animation-timing-function: linear; |
42 |
}
|
43 |
|
44 |
form { |
45 |
margin: 0 auto; |
46 |
margin-top: 20px; |
47 |
}
|
48 |
|
49 |
label { |
50 |
color: #555; |
51 |
display: inline-block; |
52 |
margin-left: 18px; |
53 |
padding-top: 10px; |
54 |
font-size: 14px; |
55 |
}
|
56 |
|
57 |
p a { |
58 |
font-size: 11px; |
59 |
color: #aaa; |
60 |
float: right; |
61 |
margin-top: -13px; |
62 |
margin-right: 20px; |
63 |
-webkit-transition: all .4s ease; |
64 |
-moz-transition: all .4s ease; |
65 |
transition: all .4s ease; |
66 |
}
|
67 |
|
68 |
p a:hover { |
69 |
color: #555; |
70 |
}
|
71 |
|
72 |
input { |
73 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
74 |
font-size: 12px; |
75 |
outline: none; |
76 |
}
|
77 |
|
78 |
input[type=text], |
79 |
input[type=password] { |
80 |
color: #777; |
81 |
padding-left: 10px; |
82 |
margin: 10px; |
83 |
margin-top: 12px; |
84 |
margin-left: 18px; |
85 |
width: 290px; |
86 |
height: 35px; |
87 |
border: 1px solid #c7d0d2; |
88 |
border-radius: 2px; |
89 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
90 |
-webkit-transition: all .4s ease; |
91 |
-moz-transition: all .4s ease; |
92 |
transition: all .4s ease; |
93 |
}
|
94 |
|
95 |
input[type=text]:hover, |
96 |
input[type=password]:hover { |
97 |
border: 1px solid #b6bfc0; |
98 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
99 |
}
|
100 |
|
101 |
input[type=text]:focus, |
102 |
input[type=password]:focus { |
103 |
border: 1px solid #a8c9e4; |
104 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
105 |
}
|
106 |
|
107 |
#lower { |
108 |
background: #ecf2f5; |
109 |
width: 100%; |
110 |
height: 69px; |
111 |
margin-top: 20px; |
112 |
box-shadow: inset 0 1px 1px #fff; |
113 |
border-top: 1px solid #ccc; |
114 |
border-bottom-right-radius: 3px; |
115 |
border-bottom-left-radius: 3px; |
116 |
}
|
117 |
|
118 |
input[type=checkbox] { |
119 |
margin-left: 20px; |
120 |
margin-top: 30px; |
121 |
}
|
122 |
|
123 |
.check { |
124 |
margin-left: 3px; |
125 |
font-size: 11px; |
126 |
color: #444; |
127 |
text-shadow: 0 1px 0 #fff; |
128 |
}
|
129 |
|
130 |
input[type=submit] { |
131 |
float: right; |
132 |
margin-right: 20px; |
133 |
margin-top: 20px; |
134 |
width: 80px; |
135 |
height: 30px; |
136 |
font-size: 14px; |
137 |
font-weight: bold; |
138 |
color: #fff; |
139 |
background-color: #acd6ef; /*IE fallback*/ |
140 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
141 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
142 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
143 |
border-radius: 30px; |
144 |
border: 1px solid #66add6; |
145 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
146 |
cursor: pointer; |
147 |
}
|
148 |
|
149 |
input[type=submit]:hover { |
150 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
151 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
152 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
153 |
}
|
154 |
|
155 |
input[type=submit]:active { |
156 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
157 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
158 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
159 |
}
|
Kesimpulan
Saya harap Anda menikmati mengikuti saat kita menciptakan sesuatu yang tidak hanya terlihat bagus, tetapi juga berfungsi dengan indah dan memiliki sedikit 'sesuatu' ekstra. Terima kasih telah membaca!
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
