آموزش طراحي دکمه های outline در سایت

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html ، دکمه های زمينه ای (outline button) ایجاد کنیم.

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

                   Success
                   Info
                   Warning
                   Danger
                   Default
                 

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

                .btn {
                  border: 2px solid black;
                  background-color: white;
                  color: black;
                  padding: 14px 28px;
                  font-size: 16px;
                  cursor: pointer;
                }

                /* Green */
                .success {
                  border-color: #4CAF50;
                  color: green;
                }

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

                /* Blue */
                .info {
                  border-color: #2196F3;
                  color: dodgerblue
                }

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

                /* Orange */
                .warning {
                  border-color: #ff9800;
                  color: orange;
                }

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

                /* Red */
                .danger {
                  border-color: #f44336;
                  color: red
                }

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

                /* Gray */
                .default {
                  border-color: #e7e7e7;
                  color: black;
                }

                .default:hover {
                  background: #e7e7e7;
                

<h1>Outline Buttons</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>

ویژگی border-radius را برای ایجاد دکمه های زمینه ای گرد شده ، بکار برید .

<h1>Rounded Outline Buttons</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>