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

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

فهرست عناوین

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

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

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

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

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

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

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

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

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

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

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

<body>

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

</body>

<body>

</body>

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

<body>

<input type="button" value="ارسال">

</body>

<body>

</body>

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

<body>

<form action="get/btn/get-data.php">
<input type="text" name="firstname" required>
<input type="submit" value="ارسال">
</form>

</body>

<body>

</form>

</body>

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

<body>

<a href="https://free-learn.ir/">روی من کلیک کن</a>

</body>

<body>

</body>

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

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

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

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

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

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

<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>

<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>

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

<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>

<body>

</body>

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

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

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

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

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

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

مثال :

<style>

.bd1{border-radius:5px;}
.bd2{border-radius:20px;}

</style>

<style>

.bd1{border-radius:5px;}

.bd2{border-radius:20px;}

</style>

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

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

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

<style>

.mybtn{
 border:2px solid #5db616;
}

.mybtn:hover{
 background-color:#5db616;
}

</style>

<style>

.mybtn{

border:2px solid #5db616;

}

.mybtn:hover{

background-color:#5db616;

}

</style>

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

<style>

.mybtn{
 background-color:#5db616;
 color:#fff;
}

.mybtn:hover{
 background-color:#fff;
 border:2px solid #5db616;
 color:#000;
}

</style>

<style>

.mybtn{

background-color:#5db616;

color:#fff;

}

.mybtn:hover{

background-color:#fff;

border:2px solid #5db616;

color:#000;

}

</style>

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

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

مثال شماره 1:

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

.mybtn:hover{

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

مثال شماره ۲ :

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

.mybtn:hover{

box-shadow: 0 2px 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3);

}

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

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

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

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

.mybtn{
 width:200px;
}

.mybtn{

width:200px;

}

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

.mybtn{
 width:100%;
}

.mybtn{

width:100%;

}

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

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

<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>

<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

مثال شماره ۱ :

<body>

<button class="button">
 <span>ماوس رو بیار روم </span>
</button>

</body>

<body>

</button>

</body>

مثال شماره ۲ :

<body>

<button class="button">سلام</button>

</body>

<body>

</body>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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