ساخت دکمه در HTML

در این بخش از آموزش HTML می خواهیم به سراغ ساخت دکمه در HTML برویم.

ابتدا دستورات html,css را یاد بگیرید سپس به سراغ ساخت دکمه در HTML بیایید.

کد html ساخت دکمه :

در قسمت پایین ، کد html ساخت دکمه را مشاهده می کنید. این کد را در یک فایل html کپی کرده و سپس آن را اجرا کنید.

حتما پسوند فایل ها را در ویندوز فعال کنید در غیر این صورت احتمال دارد که فایل html با پسوند txt ذخیره شود و اجرا نشود.

با استفاده از این کد یک دکمه زیبا ایجاد می کنید. کد ساده و قابل فهم است.

از دستور meta و viewport برای ریسپانسیو کردن قالب سایت استفاده می کنیم.

با استفاده از link می توانیم font-awesome را به صفحه لینک کنیم. از این ابزار برای اضافه کردن فونت های عکس دار استفاده میکنیم.

در قسمت پایین کد html را مشاده می کنید. تگ button برای ساخت دکمه استفاده می شود. اما با استفاده از تگ a نیز می توانیم دکمه ای شبیه این را ایجاد کنیم.

در قسمت head می توانیم css یا استایل اضافه کنیم. استایل ها را باید در تگ style قرار دهیم.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>SH711.COM Buttons</h2>
<p>Auto width:</p>
<button class="btn"><i class="fa fa-download"></i> Download</button>
<p>Full width:</p>
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>
</body>
</html>

کد css ساخت دکمه :

در قسمت پایین کد css ساخت دکمه را مشاهده می کنید.

پیشنهاد می کنیم ابتدا دستورات html,css را بخوبی بیاموزید سپس به سراغ پروژه ها بروید.

تگ button دارای کلاس btn  می باشد. در تگ style ، به کلاس btn چندین ویژگی یا استایل داده ایم تا دکمه ای زیبا را ایجاد کنیم.

مثلا با دستور background-color رنگ پس زمینه دکمه را تغییر داده ایم. 

با دستور color رنگ متن را تغییر داده ایم.

با دستور border بردر یا خطوط دور دکمه را برداشته ایم. 

تا بحال دکمه زیبایی ایجاد نکرده ایم با دستور padding فاصله داخلی می دهیم تا دکمه زیبایی را ایجاد کنیم.

با دستور font-family می توانیم فونت متن را تغییر دهیم. با font-size (فونت سایز) می توانیم اندازه متن را تغییر دهیم.

کد کامل پروژه را می توانید در قسمت پایین دانلود کنید.

<style>
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
.btn:hover {
background-color: RoyalBlue;
}
</style>

ساخت دکمه گروهی یا Horizontal Button Groups :

در مثال یا مینی پروژه زیر ساخت دکمه گروهی یا Horizontal Button Groups را فرا می گیرید.

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

در قسمت اول کد html ساخت دکمه گروهی را مشاهده می کنید.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="btn-group">
<button>Apple</button>
<button>Samsung</button>
<button>Sony</button>
</div>
</body>
</html>

در قسمت اول کد css ساخت دکمه گروهی را مشاهده می کنید.

<style>
.btn-group button {
background-color: #4CAF50;
border: 1px solid green;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:hover {
background-color: #3e8e41;
}
</style>


نویسنده : هدایت عباسی

ثبت نظر