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

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

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

آموزش ساخت دکمه با متن

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

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

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

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

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

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

قسمت اول :

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

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

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

   .btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}
 
/* On mouse-over */
.btn:hover {background: #eee;}
 
.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

نمونه یک:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}
</style>
</head>
<body>

<h2>دکمه های متنی</h2>

<button class="btn success">موفقیت</button>
<button class="btn info">اطلاعات</button>
<button class="btn warning">هشدار</button>
<button class="btn danger">خطر</button>
<button class="btn default">پیش فرض</button>

</body>
</html>

قسمت دوم :

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

مثال :

        .btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}
 
/* Green */
.success {
    color: green;
}
 
.success:hover {
    background-color: #4CAF50;
    color: white;
}
 
/* Blue */
.info {
    color: dodgerblue;
}
 
.info:hover {
    background: #2196F3;
    color: white;
}
 
/* Orange */
.warning {
    color: orange;
}
 
.warning:hover {
    background: #ff9800;
    color: white;
}
 
/* Red */
.danger {
    color: red;
}
 
.danger:hover {
    background: #f44336;
    color: white;
}
 
/* Gray */
.default {
    color: black;
}
 
.default:hover {
    background: #e7e7e7;
}

نمونه دوم:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

/* Green */
.success {
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Blue */
.info {
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.danger {
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.default {
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
</style>
</head>
<body>

<h2>دکمه های متنی</h2>
<p>:دکمه های متنی با رنگ های زمینه ای منحصر به فرد در هنگام قرار گرفتن ماوس روی دکمه</p>

<button class="btn success">موفقیت</button>
<button class="btn info">اطلاعات</button>
<button class="btn warning">هشدار</button>
<button class="btn danger">خطر</button>
<button class="btn default">پیش فرض</button>

</body>
</html>

امتياز :

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

بازديد : 88

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

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

نظرات (0)

نظرات

آموزش ساخت دکمه با متن

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

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

قسمت اول :

نمونه یک:

طراح قالب

مترجم قالب

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

فيلم روز

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

ورود به سايت

آموزش ساخت دکمه با متن

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

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

قسمت اول :

نمونه یک:

قسمت دوم :

نمونه دوم:

طراح قالب

مترجم قالب

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

فيلم روز

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