این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کار با دکمه ها یا Buttons در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با دکمه ها یا Buttons در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با دکمه ها یا Buttons در CSS
دکمه یا باتون یا به انگلیسی Button که دیگه میدونید چیه! به هرچیزی که قابل کلیک باشه میتونیم بهش بگیم دکمه، مثلا اون دکمه های داخل فرم های عضویت و ورود یا دکمه داخل منو و..
بطور کلی میتونیم بگیم ما چندین نمونه دکمه داریم :
- دکمه قابل کلیک ولی بدون لینک ( تگ button )
- دکمه قابل کلیک و دارای لینک ( تگ a )
- دکمه سابمیت یا Submit ( برای ارسال فرم ،استفاده فقط در فرم ها )
دکمه قابل کلیک ولی بدون لینک : این دکمه ها لینک ندارند ولی قابل کلیک هستن، مثلا میتونیم بگیم وقتی روی این دکمه کلیک شد یه پیغام نشون داده بشه یا حالا هرکار دیگه
دکمه قابل کلیک و دارای لینک : خیلی راحت با استفاده از تگ a میتونیم یه لینک درست کنیم بعدش با استفاده از CSS بهش استایل بدیم
دکمه سابمیت یا Submit : این نوع دکمه در داخل تگ Form مورد استفاده قرار میگیرد و کاربر با کلیک بروی این نوع دکمه ها اطلاعات یک فرم از صفحه جاری به صفحه ای در سرور منتقل می شود.
Free-Learn
خیلی راحت با استفاده از تگ button در HTML میتونیم یک دکمه ایجاد کنیم بعدش با استفاده از CSS هر استایلی که دوس داشتیم بهش بدیم.
مثال شماره ۱ : ایجاد یک دکمه قابل کلیک ( وقتی روش کلیک میشه یه پیغام نشون میده )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> button{ background-color:#008CBA; color:#fff; padding:10px; border:2px solid black; cursor: pointer; } </style> |
Free-Learn
دکمه قابل کلیک و دارای لینک ( تگ a )
تگ a رو که دیگه میدونید چیه! خیلی راحت با استفاده از تگ a در HTML میتونیم یک لینک درست کنیم بعدش بازم با استفاده از CSS میتونیم بهش استایل بدیم و شبیه یه دکمه درش بیارم.
مثال شماره ۱ : استایل دادن به تگ a ( لینک )
|
1 2 3 4 5 6 7 |
.MyButton{ background-color:#008CBA; color:#fff; padding:10px; border:2px solid black; text-decoration:none; } |
مثال شماره ۲ : استایل دادن به تگ a ( در حالت های مختلف لینک )
|
1 2 3 4 5 6 7 8 9 |
a:link, a:visited{ text-decoration:none; background-color:#2196f3; color:#fff; padding:10px; text-align:center; transition:0.4s; border-radius:6px; } |
مثال شماره ۳ : تگ a تمام عرض ( عرض %۱۰۰ )
|
1 2 3 |
a.MyLink{ display:block; } |
Free-Learn
دکمه سابمیت یا Submit ( استفاده فقط در فرم ها )
همونطور که گفتم این نوع دکمه کاربردش در تگ Form می باشد، و وقتی روش کلیک میشه داده های داخل فرم رو بسمت سرور ارسال میکنه. ( برای استایل دادن به این دکمه هیچ فرقی با روش های بالا نداره و فقط کافیه با استفاده از CSS هرچی دوس داشتید بهش استایل بدید )
مثال شماره ۱ :
|
1 |
<input type="submit" class="MyButton" value="ارسال"> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : دکمه در رنگبندی های مختلف
|
1 2 3 |
.bg-red{background-color: red;} .bg-green{background-color: green;} .bg-orange{background-color: orange;} |
مثال شماره ۲ : دکمه در اندازه های مختلف
|
1 2 3 |
.MySize-20{ width:20%; } .MySize-60{ width:60%; } .MySize-100{ width:100%; } |
مثال شماره ۳ : وقتی ماوس میره روی دکمه، دکمه سایه دار میشه
|
1 2 3 |
.MyButton:hover{ box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3); } |
مثال شماره ۴ : پس زمینه سفید با رفتن ماوس بروی آن پس زمینه رنگی می شود
|
1 2 3 4 |
.MyButton:hover{ background-color:#5db616; color:#fff; } |
مثال شماره ۵ : پس زمینه رنگی با رفتن ماوس بروی آن پس زمینه سفید می شود ( برعکس مثال بالا )
|
1 2 3 4 5 |
.MyButton{ background-color:#5db616; color:#fff; border:2px solid #5db616; } |
مثال شماره ۶ : لینک دادن به دکمه button ( با استفاده از جاوااسکریپت )
|
1 2 3 4 5 |
<body> <button onclick="location.href='https://free-learn.ir'"> ... </button> </body> |
