جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگاننحوه کار با دکمه ها یا Buttons در CSS

نحوه کار با دکمه ها یا Buttons در CSS

15 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
292 بازدید
آموزش صفحه بندی یا Pagination در CSS

دکمه ها یا Buttons در CSS

فهرست عناوین

  • دکمه ها یا Buttons در CSS
  • کار با دکمه ها یا Buttons در CSS
  • سفارشی سازی دکمه ها در CSS
  • ایجاد رنگبندی های مختلف برای دکمه ها
  • گرد کردن دکمه ها در CSS
  • نحوه ایجاد دکمه با خط دور لبه
  • نحوه سایه دار کردن دکمه
  • نحوه تغییر اندازه دلخواه دکمه ها
  • نحوه ایجاد دکمه بروی تصویر
  • مثال های بیشتر از دکمه ها در CSS

دکمه یا باتون یا به انگلیسی Button چیزی است که در یک صفحه وب قرار میگیرد و کاربر میتواند بروی آن کلیک نماید و سپس متن یا محتوایی را از سمت سایت دریافت نماید.

مثلا ما میتونیم بروی یک دکمه کلیک نماییم و یک پیغام به ما نمایش داده شود، یا میتوانیم با کلیک بروی یک دکمه یک فایل یا تصویر و.. را دانلود نماییم و دیگر مواردی که یک دکمه میتواند ایجاد نماید.

حال ما چندین نمونه دکمه میتونیم داشته باشیم :

  • دکمه قابل کلیک ولی بدون لینک
  • دکمه قابل کلیک و دارای لینک
  • دکمه انتقال اطلاعات از صفحه جاری به صفحه مقصد ( استفاده فقط در فرم ها )

دکمه قابل کلیک ولی بدون لینک : این دکمه ها لینک ندارند ، پس در نتیجه مسیر مقصد هم ندارند ، یعنی اگه کاربر روشون کلیک کنه به هیچ جایی منتقل نخواهند شد.

دکمه قابل کلیک و دارای لینک : ولی این دکمه ها لینک دارند، یعنی اگه کاربر روشون کلیک کنه میتونه به دیگر صفحات انتقال داده شود.

دکمه انتقال اطلاعات از صفحه جاری به صفحه مقصد : این نوع دکمه ها در درون تگ فرم یا Form مورد استفاده قرار میگیرند و کاربر با کلیک بروی این نوع دکمه ها اطلاعات یک فرم از صفحه جاری به صفحه ای در سرور منتقل می شود.

کار با دکمه ها یا Buttons در CSS

حال در این جلسه میخوایم با دکمه ها در CSS کار کنیم و یاد بگیریم که چگونه میتوان یک دکمه با لینک و یک دکمه بدون لینک را در یک صفحه وب ایجاد کرد.

از دکمه های نوع Submit در فرم ها جهت ارسال اطلاعات یک فرم به سرور استفاده می شود.

مثال شماره ۱ : ایجاد یک دکمه از نوع Button ( استفاده از تگ Button )

1
2
3
4
5
<body>
 
<button onclick="alert('سلام خوبی؟');">روی من کلیک کن</button>
 
</body>

 

مثال شماره ۲ : ایجاد یک دکمه از نوع Button ( استفاده از تگ Input )

1
2
3
4
5
<body>
 
<input type="button" value="ارسال">
 
</body>

 

مثال شماره ۳ : ایجاد یک دکمه از نوع Submit در فرم جهت انتقال اطلاعات به سرور ( استفاده از تگ Input )

1
2
3
4
5
6
7
8
<body>
 
<form action="get/btn/get-data.php">
<input type="text" name="firstname" required>
<input type="submit" value="ارسال">
</form>
 
</body>

 

مثال شماره ۴ : ایجاد یک دکمه ی لینک دار ( با کلیک بروی آن کاربر به مکانی دیگر منتقل خواهد شد ) با استفاده از تگ a

1
2
3
4
5
<body>
 
<a href="https://free-learn.ir/">روی من کلیک کن</a>
 
</body>

 

سفارشی سازی دکمه ها در CSS

ما به راحتی در CSS میتونیم دکمه ها را سفارشی سازی نماییم، هرچند در مثال های بالا باید دیده باشید که من از CSS برای آرایش دکمه ها استفاده میکردم.

حال در این قسمت میخوایم یکمی حرفه ای تر سفارشی سازی کنیم، یا در واقع دکمه هامون رو خوشکلتر کنیم که از نظر ظاهری جذاب تر باشند.

ایجاد یک کلاس برای استفاده در تمامی نوع های دکمه ها

خب یعنی چی کلاس ! خب من میام یک کلاس ایجاد میکنم بعد در این کلاس از یسری ویژگی های CSS برای استایل دهی و در واقع خوشکلتر کردن دکمه ها استفاده میکنم بعد به راحتی میام و از این کلاس در دکمه ها با نوع های مختلف استفاده میکنم.

مثلا من کلاس زیر رو ایجاد کردم :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
 
.mybtn{
border:none;
background-color:#5db616;
color:#fff;
padding:10px 20px;
text-decoration:none;
display: inline-block;
cursor: pointer;
border-radius:6px;
}
 
.mybtn:hover{
background-color:#607D8B;
}
 
</style>

 

حالا میخوام از همین کلاس در تمامی دکمه های بالا ( که نوع های مختلفی داشتن ) استفاده کنم.

1
2
3
4
5
6
7
8
<body>
 
<a href="https://free-learn.ir/" class="mybtn">روی من کلیک کن</a>
<button class="mybtn">روی من کلیک کن</button>
<input type="button" class="mybtn">
<input type="submit" class="mybtn">
 
</body>

 

ایجاد رنگبندی های مختلف برای دکمه ها

در ادامه مخوایم برای دکمه مون رنگ بندی های مختلفی ایجاد کنیم، پس برای اینکار میتونیم از چندین کلاس استفاده نماییم و در هر کلاس یک رنگ برای دکمه مشخص نماییم.

1
<a href="#" class="mybtn bg-green">روی من کلیک کن</a>

 

گرد کردن دکمه ها در CSS

ما در CSS یک ویژگی داریم به اسم Border-radius که با استفاده از آن میتوانیم گوشه های یک عنصر را گرد نماییم.

مثال :

1
2
3
4
5
6
<style>
 
.bd1{border-radius:5px;}
.bd2{border-radius:20px;}
 
</style>

 

نحوه ایجاد دکمه با خط دور لبه

در ادامه ی آموزش کار با دکمه ها یا Buttons در CSS میخواهیم با استفاده از ویژگی Border در CSS یک خط به دور لبه های یک عنصر بکشیم، حال در این قسمت میخوایم با استفاده از این ویژگی دکمه های جذابتری ایجاد کنیم.

مثال شماره ۱ : پس زمینه سفید با رفتن ماوس بروی آن پس زمینه رنگی می شود

1
2
3
4
5
6
7
8
9
10
11
<style>
 
.mybtn{
border:2px solid #5db616;
}
 
.mybtn:hover{
background-color:#5db616;
}
 
</style>

 

مثال شماره ۲ : پس زمینه رنگی با رفتن ماوس بروی آن پس زمینه سفید می شود. (برعکس حالت بالا)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
 
.mybtn{
background-color:#5db616;
color:#fff;
}
 
.mybtn:hover{
background-color:#fff;
border:2px solid #5db616;
color:#000;
}
 
</style>

 

نحوه سایه دار کردن دکمه

با استفاده از ویژگی box-shadow به راحتی میتوان برای عناصر در یک صفحه وب سایه ایجاد کرد.

مثال شماره 1:

1
2
3
.mybtn:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

 

مثال شماره ۲ :

1
2
3
.mybtn:hover{
box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3);
}

 

نحوه تغییر اندازه دلخواه دکمه ها

همانطور که در مثال های قبلی مشاهده نمودید دکمه ها بصورت پیش فرض در یک اندازه مشخص شده ایجاد می شوند، حال ما میتوانیم با استفاده از ویژگی Width اندازه یک دکمه را به دلخواه مشخص نماییم.

اندازه های پیکسلی اندازه های ثابت و فیکس می باشند ولی اندازه های درصدی اندازه های واکنش گرا می باشند.

مثال شماره ۱ : استفاده از واحد اندازه گیری پیکسل برای مشخص کردن اندازه

1
2
3
.mybtn{
width:200px;
}

مثال شماره ۲ : استفاده از واحد اندازه گیری درصدی ( برای تمام عرض کردن دکمه )

1
2
3
.mybtn{
width:100%;
}

نحوه ایجاد دکمه بروی تصویر

در ادامه میخواهیم یاد بگیریم که چگونه میتوان یک دکمه را بروی یک تصویر قرار داد.

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
<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%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #F44336;
color:#fff;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
transition:0.3s;
}
 
.container .btn:hover {
background-color: #5db616;
color: #fff;
}
 
</style>

 

مثال های بیشتر از دکمه ها در CSS

مثال شماره ۱ :

1
2
3
4
5
6
7
<body>
 
<button class="button">
<span>ماوس رو بیار روم </span>
</button>
 
</body>

 

مثال شماره ۲ :

1
2
3
4
5
<body>
 
<button class="button">سلام</button>
 
</body>

بیشتر بخوانیم:

آموزش کامل واحدهای اندازه گیری در CSS

آموزش کامل کار با Box Sizing در CSS3

آموزش افزونه MashShare

آموزش افزونه Social Warfare و اشتراک گذاری مطالب در شبکه های اجتماعی

آموزش افزونه AddToAny Share Buttons و اشتراک محتوا در شبکه اجتماعی

اشتراک گذاری:
برچسب ها: ButtonsCSSآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانکار با دکمه ها در css
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت