دکمه ها در حالت پیش فرض در HTML ظاهر خوبی ندارند و حتما باید استایل دهی شوند. بنابراین تنها بحثی که می توانیم در مورد دکمه ها انجام دهیم، روش و نوع استایل دادن به دکمه در css است که در واقع موضوع همین مقاله نیز می باشد.
استایل دهی دکمه ها
روش های متعددی برای استایل دادن به دکمه در css وجود دارد. در مثال زیر ما استایل پیش فرض دکمه ها در HTML را با استایل دلخواه خودمان مقایسه کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button>DefaultButton</button>
<ahref="#"class="button">Link Button</a>
<button class="button">Button</button>
<input type="button"class="button"value="Input Button">
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین رنگ دکمه ها
برای تعیین رنگ دکمه ها باید از قابلیت background-color استفاده کنیم. به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.button2 {background-color:#008CBA;}/* Blue */
.button3 {background-color:#f44336;}/* Red */
.button4 {background-color:#e7e7e7;color:black;}/* Gray */
.button5 {background-color:#555555;}/* Black */
</style>
</head>
<body>
<h2>Button Colors</h2>
<p>Change the background color ofabutton with the background-color property:</p>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اندازه ی دکمه ها
برای تعیین سایز دکمه ها معمولا از خاصیت font-size در CSS استفاده می شود. در مثال زیر دکمه ها را از چپ به راست به ترتیب 10 پیکسل، 12 پیکسل، 16 پیکسل، 20 پیکسل و 24 پیکسل تعیین کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
margin:4px2px;
cursor:pointer;
}
.button1 {font-size:10px;}
.button2 {font-size:12px;}
.button3 {font-size:16px;}
.button4 {font-size:20px;}
.button5 {font-size:24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the font size ofabutton with the font-size property:</p>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته لازم به ذکر است که خاصیت padding نیز در سایز دکمه ها نقش تعیین کننده ای دارد. به اندازه ی دکمه های زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.button1 {padding:10px24px;}
.button2 {padding:12px28px;}
.button3 {padding:14px40px;}
.button4 {padding:32px16px;}
.button5 {padding:16px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Change the padding ofabutton with the padding property:</p>
<button class="button button1">10px24px</button>
<button class="button button2">12px28px</button>
<button class="button button3">14px40px</button>
<button class="button button4">32px16px</button>
<button class="button button5">16px</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دکمه های گرد و دایره ای
خاصیت border-radius به شما اجازه می دهد که گوشه های دکمه را گِرد کرده یا به طور کل دکمه را به شکل بیضی یا دایره در بیاورید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:20px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.button1 {border-radius:2px;}
.button2 {border-radius:4px;}
.button3 {border-radius:8px;}
.button4 {border-radius:12px;}
.button5 {border-radius:50%;}
</style>
</head>
<body>
<h2>Rounded Buttons</h2>
<p>Add rounded corners toabutton with the border-radius property:</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دکمه های توخالی
اگر رنگ دکمه ها را با رنگ پس زمینه شان یکی کنیم و یا آن را به طور کامل transparent قرار دهیم، دکمه ها نامرئی می شوند. در این حالت می توانیم با اضافه کردن border یک دکمه ی تو خالی ایجاد کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.button1 {
background-color:white;
color:black;
border:2pxsolid#4CAF50;
}
.button2 {
background-color:white;
color:black;
border:2pxsolid#008CBA;
}
.button3 {
background-color:white;
color:black;
border:2pxsolid#f44336;
}
.button4 {
background-color:white;
color:black;
border:2pxsolid#e7e7e7;
}
.button5 {
background-color:white;
color:black;
border:2pxsolid#555555;
}
</style>
</head>
<body>
<h2>Colored Button Borders</h2>
<p>Usethe border propertytoaddaborder tothe button:</p>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تاثیر hover بر زیبائی
یکی از بهترین افکت ها برای بالا بردن زیبایی دکمه ها اضافه کردن انیمیشن است، اما نه هر انیمیشنی! برخی از انیمیشن ها آن قدر طولانی هستند که باعث اذیت شدن کاربر می شوند اما انیمیشن های کوتاه مانند hover (با استفاده از hover:) به زیبایی آن اضافه می کنند. یادتان باشد که با استفاده از transition-duration می توانید سرعت انیمیشن هایی مانند hover را تعیین کنید.
به چند مثال زیر که از ترکیب hover و دکمه های توخالی ایجاد شده اند، دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:16px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
-webkit-transition-duration:0.4s;/* Safari */
transition-duration:0.4s;
cursor:pointer;
}
.button1 {
background-color:white;
color:black;
border:2pxsolid#4CAF50;
}
.button1:hover {
background-color:#4CAF50;
color:white;
}
.button2 {
background-color:white;
color:black;
border:2pxsolid#008CBA;
}
.button2:hover {
background-color:#008CBA;
color:white;
}
.button3 {
background-color:white;
color:black;
border:2pxsolid#f44336;
}
.button3:hover {
background-color:#f44336;
color:white;
}
.button4 {
background-color:white;
color:black;
border:2pxsolid#e7e7e7;
}
.button4:hover {background-color:#e7e7e7;}
.button5 {
background-color:white;
color:black;
border:2pxsolid#555555;
}
.button5:hover {
background-color:#555555;
color:white;
}
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<p>Usethe:hover selector tochange the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong>Usethe transition-duration propertytodetermine the speed of the"hover"effect:</p>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد سایه برای دکمه ها
شما می توانید با خاصیت box-shadow به دکمه های خود سایه بدهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
-webkit-transition-duration:0.4s;/* Safari */
transition-duration:0.4s;
}
.button1 {
box-shadow:08px16px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow:012px16px0rgba(0,0,0,0.24),017px50px0rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<h2>Shadow Buttons</h2>
<p>Usethe box-shadow propertytoadd shadows tothe button:</p>
<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دکمه های غیرفعال
با استفاده از خاصیت opacity می توانید یک دکمه را کاملا بی رنگ کنید، اما اگر مقدار مناسبی به آن بدهید می توانید شکل آن را طوری تغییر دهید که انگار غیرفعال شده است. همچنین اگر به خاصیت cursor مقدار not-allowed بدهید نیز علامت «ممنوع» نمایش داده می شود و ظاهر را کامل می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.disabled {
opacity:0.6;
cursor:not-allowed;
}
</style>
</head>
<body>
<h2>Disabled Buttons</h2>
<p>Usethe opacity propertytoadd some transparency tothe button(make it look disabled):</p>
<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عرض دکمه ها
در حالت پیش فرض، عرض یک دکمه به صورت خودکار و بر اساس محتویات متنی آن تعیین می شود اما ما می توانیم با استفاده از width آن را به صورت دلخواه خودمان تغییر دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px2px;
cursor:pointer;
}
.button1 {width:250px;}
.button2 {width:50%;}
.button3 {width:100%;}
</style>
</head>
<body>
<h2>Button Width</h2>
<p>Usethe width propertytochange the width of the button:</p>
<p><strong>Tip:</strong>Usepixels ifyou want tosetafixed width andusepercent forresponsive buttons(e.g.50%of its parentelement).Resize the browser window tosee the effect.</p>
<button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مجموعه دکمه ها
اگر بخواهیم مجموعه ای از دکمه ها داشته باشیم (یعنی چندین دکمه را در کنار هم قرار دهیم) می توانیم از خاصیتfloat:left یا float:right استفاده کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.btn-group .button {
background-color:#4CAF50;/* Green */
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
cursor:pointer;
float:left;
}
.btn-group .button:hover {
background-color:#3e8e41;
}
</style>
</head>
<body>
<h2>Button Groups</h2>
<p>Remove margins andfloatthe buttons tocreateabutton group:</p>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
<pstyle="clear:both"><br>Remember toclear floats after,orelsewill thispelement also floatnext tothe buttons.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در صورت نیاز می توانید به مثال بالا حاشیه (border) نیز اضافه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.btn-group .button {
background-color:#4CAF50;/* Green */
border:1pxsolidgreen;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
cursor:pointer;
float:left;
}
.btn-group .button:not(:last-child) {
border-right:none;/* Prevent double borders */
}
.btn-group .button:hover {
background-color:#3e8e41;
}
</style>
</head>
<body>
<h2>Bordered Button Group</h2>
<p>Add borders tocreateabordered button group:</p>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
<pstyle="clear:both"><br>Remember toclear floats after,orelsewill thispelement also floatnext tothe buttons.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همچنین با تنظیم display روی حالت block و دستور float می توانید دکمه ها را روی هم (عمودی) قرار دهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.btn-group .button {
background-color:#4CAF50;/* Green */
border:1pxsolidgreen;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
font-size:16px;
cursor:pointer;
width:150px;
display:block;
}
.btn-group .button:not(:last-child) {
border-bottom:none;/* Prevent double borders */
}
.btn-group .button:hover {
background-color:#3e8e41;
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترکیب دکمه و تصویر
شما می توانید دکمه ی خود را روی یک تصویر قرار دهید! به طور مثال در کد زیر با استفاده از دستور position: relative توانسته ایم این کار را انجام دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.container {
position:relative;
width:100%;
max-width:400px;
}
.container img {
width:100%;
height:auto;
}
.container .btn {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background-color:#f1f1f1;
color:black;
font-size:16px;
padding:16px30px;
border:none;
cursor:pointer;
border-radius:5px;
text-align:center;
}
.container .btn:hover {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Addabutton toan image:</p>
<div class="container">
<img src="https://www.w3schools.com/css/img_lights.jpg"alt="Snow"style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
انیمیشن های پیشرفته تر
با اینکه hover انیمیشن زیبایی است اما می توانیم از انیمیشن های پیشرفته تری استفاده کنیم.
مثال اول: در مثال زیر مشخص کرده ایم که در هنگام hover مقدار padding راست 25 پیکسل شود (افزایش یابد) و سپس با دستور after: علامت « را به دکمه اضافه کرده ایم. کد 00bb را که به content داده ایم، همان علامت « می باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
display:inline-block;
border-radius:4px;
background-color:#f4511e;
border:none;
color:#FFFFFF;
text-align:center;
font-size:28px;
padding:20px;
width:200px;
transition:all0.5s;
cursor:pointer;
margin:5px;
}
.button span {
cursor:pointer;
display:inline-block;
position:relative;
transition:0.5s;
}
.button span:after {
content:'\00bb';
position:absolute;
opacity:0;
top:0;
right:-20px;
transition:0.5s;
}
.button:hover span {
padding-right:25px;
}
.button:hover span:after {
opacity:1;
right:0;
}
</style>
</head>
<body>
<h2>Animated Button</h2>
<button class="button"style="vertical-align:middle"><span>Hover</span></button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم: در این مثال می خواهیم حالت فشرده شدن را ایجاد کنیم. برای این کار ابتدا با استفاده از box-shadow زیر دکمه ی خود سایه ای خاکستری اضافه می کنیم (به حالتی که پخش نشده باشد). سپس می گوییم در حالت active: مقدار box-shadow را کمتر کند. این مسئله باعث ایجاد یک انیمیشن جالب می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
display:inline-block;
padding:15px25px;
font-size:24px;
cursor:pointer;
text-align:center;
text-decoration:none;
outline:none;
color:#fff;
background-color:#4CAF50;
border:none;
border-radius:15px;
box-shadow:09px#999;
}
.button:hover {background-color:#3e8e41}
.button:active {
background-color:#3e8e41;
box-shadow:05px#666;
transform:translateY(4px);
}
</style>
</head>
<body>
<h2>Animated Buttons-"Pressed Effect"</h2>
<button class="button">Click Me</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال سوم: می خواهیم حالت ripple یا انعکاس را ایجاد کنیم. در این حالت زمانی که روی دکمه کلیک شود لایه ی دیگری روی دکمه پخش می شود (مانند افتادن سنگ در آب):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.button {
position:relative;
background-color:#4CAF50;
border:none;
font-size:28px;
color:#FFFFFF;
padding:20px;
width:200px;
text-align:center;
-webkit-transition-duration:0.4s;/* Safari */
transition-duration:0.4s;
text-decoration:none;
overflow:hidden;
cursor:pointer;
}
.button:after {
content:"";
background:#f1f1f1;
display:block;
position:absolute;
padding-top:300%;
padding-left:350%;
margin-left:-20px!important;
margin-top:-120%;
opacity:0;
transition:all0.8s
}
.button:active:after {
padding:0;
margin:0;
opacity:1;
transition:0s
}
</style>
</head>
<body>
<h2>Animated Button-Ripple Effect</h2>
<button class="button">Click Me</button>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟