ویرگول
ورودثبت نام
محمدمهدی بهرامی
محمدمهدی بهرامیتوسعه‌دهنده فرانت‌اند (React) با ۱ سال تجربه در ساخت اپلیکیشن‌های وب، با تمرکز بر کیفیت، کدنویسی تمیز و ارائه تجربه کاربری روان و خوب.
محمدمهدی بهرامی
محمدمهدی بهرامی
خواندن ۳ دقیقه·۴ سال پیش

آموزش ساخت دکمه با CSS

آموزش ساخت دکمه با css و html
آموزش ساخت دکمه با css و html

سلام به کد دوستان عزیز. من بهرامی هستم و امروز می خواهم ساختن دکمه های بالا را با استفاده از HTML و CSS به شما یاد بدهم.

گفتن این نکته رو هم ضروری می دونم که شما باید مهارت های زیر را برای ساختن دکمه بالا داشته باشید:

  1. آشنایی با html و css
  2. آشنایی با ویرایشگر های کد و IDE ها
  3. آشنایی با مرورگر
  4. آشنایی با روش های استفاده CSS در HTML
  5. بلد بودن زبان انگلیسی حداقل در حد مبتدی

(لینک ها)

می خواهم html و css را به زبان فارسی یاد بگیرم:

  1. اپلیکیشنhtml
http://cafebazaar.ir/app/?id=com.diamond.hlaf&ref=share
  1. اپلیکیشن css
http://cafebazaar.ir/app/?id=ir.diamondcorp.cla&ref=share
  1. فیلم و جزوه html
https://sariasan.com/html/free-full-lessons-2/
  1. فیلم و جزوه css
https://sariasan.com/css1/css-free-full-lessons/

می توانم html و css را به انگلیسی بخوانم:

  1. اپلیکیشن
https://myket.ir/app/nabilsoft.com.learnwebdevelopment

(کد ها)

1:
<button id=&quota&quot>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;
      }

بریم سراغ آموزش:

  1. ابتدا یک فایل button.html ایجاد و اعلان DOCTYPE و بقیه تگ های مورد نیاز را وارد کنید.
  2. کد 1 را در تگ <body> کپی کنید. این کد حاوی تگ دکمه، شناسه تگ و کلمه دکمه بین تگ شروع و پایان هستش.
  3. در تگ <style> که در تگ <head> وارد کرده اید، کد 2 را وارد کنید.
  4. در کد 2، a# را داریم که سلکتور دکمه ماست.
  5. خاصیت width به معنای طول می باشد، که می توانید با پیکسل مشخص کنید.
  6. خاصیت height به معنای عرض می باشد، که آن را هم می توان با پیکسل نوشت.
  7. خاصیت border-radius که با پیکسل مشخص می شود توانایی این را داراست که به دکمه ی ما حالت گرد می دهد.
  8. خاصیت border-color رنگ حاشیه دکمه ما را تغییر می دهد(رنگ در سی اس اس).
  9. اگر بعد خاصیتbackground کلمه none را بگذاریم پس زمینه دکمه حذف می شود یا به عبارت دیگر پس زمینه دکمه با پس زمینه صفحه یکی می شود.
  10. سپس بعد نوشتن کد 2، به خط بعدی رفته و کد 3 را وارد کنید.
  11. در کد سه بعد a# عبارت :focus برای وقتی هستش که میخواهیم وقتی دکمه کلیک شد دکمه به آن حالت تغییر کند.
  12. دوباره ما از خاصیت width استفاده کرده ایم تا بعد کلیک دکمه، سایز از 200 پیکسل به 300 پیکسل تغییر کند.
  13. نکته:لازم نیست خواصی که نمی خواهید تغییر کنند را در focus هم وارد کنید.
  14. خاصیت transition کمک می کند که تعیین کنیم که دکمه بعد کلیک شدن با چه سرعتی خواص تعیین شده را به خود بگیرد.
  15. کد 4 رو هم که به body مربوطه یادتون نره.
  16. خاصیت text-align کمک می کند که موارد داخل تگ <body> را راست چین چپ چین یا وسط چین کنیم.
  17. سپس کد را ذخیره و اجرا کنید و لذت ببرید.

کسایی که نمی خوان زحمت بکشن و یاد بگیرن میتونن کل کد رو از زیر کپی کنن.

<!DOCTYPE html>
<html lang=&quoten&quot>
   <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=&quota&quot>BUTTON</button>
   </body>
</html>

(استفاده از متن بالا کاملا مجاز است)

اگر خوشتون اومد لایک کنید یا اگر سوالی دارید بپرسید حتما من یا دیگران پاسخ خواهیم داد. ممنون.


htmlcssدکمه
۸
۲
محمدمهدی بهرامی
محمدمهدی بهرامی
توسعه‌دهنده فرانت‌اند (React) با ۱ سال تجربه در ساخت اپلیکیشن‌های وب، با تمرکز بر کیفیت، کدنویسی تمیز و ارائه تجربه کاربری روان و خوب.
شاید از این پست‌ها خوشتان بیاید