آموزش ساخت دکمه با CSS
آموزش ساخت دکمه با css و htmlسلام به کد دوستان عزیز. من بهرامی هستم و امروز می خواهم ساختن دکمه های بالا را با استفاده از HTML و CSS به شما یاد بدهم.
گفتن این نکته رو هم ضروری می دونم که شما باید مهارت های زیر را برای ساختن دکمه بالا داشته باشید:
- آشنایی با html و css
- آشنایی با ویرایشگر های کد و IDE ها
- آشنایی با مرورگر
- آشنایی با روش های استفاده CSS در HTML
- بلد بودن زبان انگلیسی حداقل در حد مبتدی
(لینک ها)
می خواهم html و css را به زبان فارسی یاد بگیرم:
- اپلیکیشنhtml
http://cafebazaar.ir/app/?id=com.diamond.hlaf&ref=share - اپلیکیشن css
http://cafebazaar.ir/app/?id=ir.diamondcorp.cla&ref=share - فیلم و جزوه html
https://sariasan.com/html/free-full-lessons-2/ - فیلم و جزوه css
https://sariasan.com/css1/css-free-full-lessons/ می توانم html و css را به انگلیسی بخوانم:
- اپلیکیشن
https://myket.ir/app/nabilsoft.com.learnwebdevelopment (کد ها)
1:
<button id="a">BUTTON</button>
2:
#a {
width: 200px;
height: 50px;
border-radius: 25px;
border-color: red;
color: red;
background: none;
}
3:
#a:focus {
width: 300px;
border-color: #0f5;
color: #0f5;
transition:0.5s;
4:
body {
background-color: #111;
text-align: center;
}
بریم سراغ آموزش:
- ابتدا یک فایل button.html ایجاد و اعلان DOCTYPE و بقیه تگ های مورد نیاز را وارد کنید.
- کد 1 را در تگ <body> کپی کنید. این کد حاوی تگ دکمه، شناسه تگ و کلمه دکمه بین تگ شروع و پایان هستش.
- در تگ <style> که در تگ <head> وارد کرده اید، کد 2 را وارد کنید.
- در کد 2، a# را داریم که سلکتور دکمه ماست.
- خاصیت width به معنای طول می باشد، که می توانید با پیکسل مشخص کنید.
- خاصیت height به معنای عرض می باشد، که آن را هم می توان با پیکسل نوشت.
- خاصیت border-radius که با پیکسل مشخص می شود توانایی این را داراست که به دکمه ی ما حالت گرد می دهد.
- خاصیت border-color رنگ حاشیه دکمه ما را تغییر می دهد(رنگ در سی اس اس).
- اگر بعد خاصیتbackground کلمه none را بگذاریم پس زمینه دکمه حذف می شود یا به عبارت دیگر پس زمینه دکمه با پس زمینه صفحه یکی می شود.
- سپس بعد نوشتن کد 2، به خط بعدی رفته و کد 3 را وارد کنید.
- در کد سه بعد a# عبارت :focus برای وقتی هستش که میخواهیم وقتی دکمه کلیک شد دکمه به آن حالت تغییر کند.
- دوباره ما از خاصیت width استفاده کرده ایم تا بعد کلیک دکمه، سایز از 200 پیکسل به 300 پیکسل تغییر کند.
- نکته:لازم نیست خواصی که نمی خواهید تغییر کنند را در focus هم وارد کنید.
- خاصیت transition کمک می کند که تعیین کنیم که دکمه بعد کلیک شدن با چه سرعتی خواص تعیین شده را به خود بگیرد.
- کد 4 رو هم که به body مربوطه یادتون نره.
- خاصیت text-align کمک می کند که موارد داخل تگ <body> را راست چین چپ چین یا وسط چین کنیم.
- سپس کد را ذخیره و اجرا کنید و لذت ببرید.
کسایی که نمی خوان زحمت بکشن و یاد بگیرن میتونن کل کد رو از زیر کپی کنن.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button</title>
<style>
body {
background-color: #111;
text-align: center;
}
#a {
width: 200px;
height: 50px;
border-radius: 25px;
border-color: red;
color: red;
background: none;
}
#a:focus {
width: 300px;
border-color: #0f5;
color: #0f5;
transition:0.5s;
}
</style>
</head>
<body>
<button id="a">BUTTON</button>
</body>
</html>
(استفاده از متن بالا کاملا مجاز است)
اگر خوشتون اومد لایک کنید یا اگر سوالی دارید بپرسید حتما من یا دیگران پاسخ خواهیم داد. ممنون.
