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

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

قسمت اول :

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

                Success
                Info
                Warning
                Danger
                Default
                

قدم دوم :   کد 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;}
                

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

نمونه Text Buttons  

قسمت دوم :

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

مثال :

                                    .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;
                }
                

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

نمونه دوم Text Buttons