گرد کردن گوشه دکمه ها با CSS

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

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

                2px
                4px
                8px
                12px
                50%
                

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

                                 .button {
                  background-color: #4CAF50;
                  border: none;
                  color: white;
                  padding: 20px;
                  text-align: center;
                  text-decoration: none;
                  display: inline-block;
                  font-size: 16px;
                  margin: 4px 2px;
                }

                .button1 {border-radius: 2px;}
                .button2 {border-radius: 4px;}
                .button3 {border-radius: 8px;}
                .button4 {border-radius: 12px;}
                .button5 {border-radius: 50%;}

                

<h2>دکمه های دایره ای شکل</h2>

<p>با استفاده از ویژگی زیر به دکمه ، حاشیه های دورانی اضافه کنید</p>

<p>"border-radius"</p>

<button class="button button1">2px</button>

<button class="button button2">4px</button>

<button class="button button3">8px</button>

<button class="button button4">12px</button>

<button class="button button5">50%</button>

نمونه دکمه Round Buttons