تگ button در html + ویدیو آموزشی

تگ button در html برای ما یک دکمه ایجاد می کند که قابل کلیک کردن است. در این دکمه محتوایی مانند عکس و متن می تواند قرار بگیرید. در ادامه ساخت انواع دکمه را به مختصر بیان می کنیم سپس به صورت اختصاصی به ایجاد دکمه با تگ button در html می پرازیم تا به صورت کامل با آن آشنا شوید.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

ساخت دکمه در html

ساخت دکمه در html به چند روش امکان پذیر است که هر کدام کاربرد و ویژگی های منحصر به فرد خود را دارد. در زیر این روشها را بررسی می کنیم تا به صورت کلی با کاربرد هر کدام آشنا شوید.

ایجاد دکمه با تگ button:

با تگ button می توانید یک دکمه قابل کلیک ایجاد کنید و درون آن متن، عکس و … قرار دهید.

ایجاد دکمه با submit:

با ویژگی سابمیت می توانید در فرم های خود یک دکمه ایجاد کنید که اطلاعات فرم را به سرور ارسال کند. ویژگی submit یکی از خصوصیات تگ input است. برای ایجاد دکمه با سابمیت به صورت زیر عمل می کنیم:

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

ایجاد دکمه با تگ a:

تگ a به صورت کلی برای لینک دهی به یک صفحه و یا هدفی خاص می باشد، ولی با ایجاد بک گراند و پدینگ برای آن می توانید دکمه های زیبایی با این تگ ایجاد کنید و به هدف لینک دهید. (برای آشنایی بیشتر با این تگ می توانید مقاله تگ a در HTML را مطالعه نمایید)

تگ button در html

در زیر ویژگی های این تگ را بیان می کنیم و پس از آن با مثال سعی می کنیم موارد را بهتر توضیح دهیم.

• تگ <button> شامل یک تگ باز و یک تگ بسته است.
• تگ <button> یک دکمه قابل کلیک را تعریف می کند.
• داخل <button> می توانید عکس، متن (و برچسب هایی مانند <i>، <b>، <strong>، <br>، <img> و …) قرار دهید. این کار با دکمه ای که با عنصر <input> ایجاد شده امکان پذیر نیست!

مثال:

<button type="button">برو به وبسافت3</button>

خروجی: خروجی کار یک متن به صورت «برو به وبسافت3» خواهد بود که نه استایل دارد و نه لینک. در ادامه کم کم به آن استایل می دهیم و برای آن لینک ایجاد می کنیم.

نکته: ویژگی type را برای عنصر <button> همیشه مشخص کنید تا به مرورگرها بگویید که چه نوع دکمه ای است. اگر این کار را نکنید ممکن مرورگرها به صورت پیشفرض یک ویژگی برای آن در نظر بگیرند.

استایل دادن به button در css

برای استایل دادن به دکمه در ابتدا یک بک گراند به آن می دهیم و سپس با پدینگ، تغییر رنگ، تغییر سایز و … می توانیم یک دکمه زیبا درست کنیم.

در مثال ذکر شده استایل های زیر را درج می کنیم تا به یک خروجی زیبا برسیم:

button {
background:#2ecc71;
padding:12px 35px;
font-size:18px;
color:#fff;
margin-top:20px;
cursor:pointer; /* وقتی ماوس روی دکمه قرار می گیرد به شکل دست در می آید */
border-radius:10px;
}

خروجی:

لینک دادن به دکمه در html

تا به حال توانستیم با استفاده از تگ button در html یک دکمه ایجاد کنیم و با استایل دادن به آن، یک دکمه زیبا ایجاد کنیم، ولی هدف از ایجاد دکمه این است که با کلیک روی آن به یک هدف برسیم. مثلا با کلیک روی دکمه به یک لینک خاص هدایت شویم.

مثال: برای لینکدار کردن دکمه به صورت زیر عمل می کنیم:

<button type="button" onclick="location.href='https://websoft3.com/';">

برو به وبسافت3

</button>

مثال: اگر بخواهیم بعد از کلیک به صفحه خاصی هدایت نشود و فقط یک پیغام به ما نشان دهد به صورت زیر عمل می کنیم:

<button type="button" onclick="alert('سلام')">کلیک کن</button>

خروجی: با کلیک بر روی این دکمه یک پاپ آپ به شکل زیر در صفحه برای ما باز می شود:

جمع بندی

در این مطلب سعی شد با ذکر مثال و به صورت عملی شیوه ایجاد دکمه با تگ button در html آموزش داده شود. امیدوارم این آموزش برای شما مفید باشد. اگر در این رابطه سوالی دارید در بخش نظرات مطرح نمایید.

منبع: https://www.w3schools.com/tags/tag_button.asp