سلام دوست من به سايت آموزش برنامه نویسی خوش آمديد لطفا براي استفاده از تمامي امکانات

دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد

آموزش ساخت دکمه های تمام عرض در سایت

تاريخ: امروز, : دوشنبه 10 خرداد 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin

موضوع: آموزش طراحی سایت ,

آموزش طراحی سایت - آموزش ساخت دکمه های تمام عرض در سایت

یادگیری طراحی سایت

آموزش ساخت دکمه های تمام عرض در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های Full Width (Block) Buttons ایجاد کنیم.

قدم اول : کد HTML را اضافه کنید.
مثال :

<button type="button" class="block">Block Button</button>

قدم دوم : کد CSS را اضافه کنید.
مثال :

   .block {
  display: block;
  width: 100%;
  border: none;
  background-color: #4CAF50;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

نمونه یک

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #4CAF50;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.block:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<h2>دکمه های تمام عرض</h2>

<button class="block">Block دکمه</button>

</body>
</html>

امتياز :

1
2
3
4
5

نتيجه : 5 امتياز توسط 1 نفر مجموع امتياز : 5

بازديد : 186

نمايش اين کد فقط در ادامه مطلب براي قرار کد مورد نظر به ويرايش قالب مراجعه کنيد
برچسب ها : آموزش طراحی سایت , آموزش سئو در طراحی سایت , آموزش CSS , آموزش HTML5 , آموزش BootStrap ,

مطالب مرتبط
آموزش Image Grid
طراحی شبکه تصاویر واکنش گرا
آموزش ساخت تصاویر لایت باکس
آموزش ساخت Image Modal با استفاده از HTML و CSS3
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت اسلايدشو براي وبسايت
آموزش ساخت دکمه Back to Top برای صفحات وب
گرد کردن گوشه دکمه ها با CSS
آموزش ساخت دکمه با متن
آموزش طراحی منو برای دکمه بیشتر "More"

نظرات (0)

نظرات

آموزش ساخت دکمه های تمام عرض در سایت

آموزش طراحی سایت - آموزش ساخت دکمه های تمام عرض در سایت

یادگیری طراحی سایت

آموزش ساخت دکمه های تمام عرض در سایت

نمونه یک

طراح قالب

مترجم قالب

جديدترين مطالب روز

فيلم روز

آموزش برنامه نویسی

ورود به سايت

آموزش ساخت دکمه های تمام عرض در سایت

آموزش طراحی سایت - آموزش ساخت دکمه های تمام عرض در سایت

یادگیری طراحی سایت

آموزش ساخت دکمه های تمام عرض در سایت

نمونه یک

طراح قالب

مترجم قالب

جديدترين مطالب روز

فيلم روز

آموزش برنامه نویسی