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

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

چگونه به دکمه های هشدار فرم دهیم.

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

                    Success
                    Info
                    Warning
                    Danger
                    Default
                 

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

                .btn {
                  border: none; /* Remove borders */
                  color: white; /* Add a text color */
                  padding: 14px 28px; /* Add some padding */
                  cursor: pointer; /* Add a pointer cursor on mouse-over */
                }

                .success {background-color: #4CAF50;} /* Green */
                .success:hover {background-color: #46a049;}

                .info {background-color: #2196F3;} /* Blue */
                .info:hover {background: #0b7dda;}

                .warning {background-color: #ff9800;} /* Orange */
                .warning:hover {background: #e68a00;}

                .danger {background-color: #f44336;} /* Red */
                .danger:hover {background: #da190b;}

                .default {background-color: #e7e7e7; color: black;} /* Gray */
                .default:hover {background: #ddd;}

                   

<h1>دکمه هشدار</h1>

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