طراحی دکمه صفحه های قبلی و بعدی سایت

استایل دکمه های بعدی و قبلی Next and Previous Buttons در وب

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

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

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

                                     a {
                      text-decoration: none;
                      display: inline-block;
                      padding: 8px 16px;
                    }

                    a:hover {
                      background-color: #ddd;
                      color: black;
                    }

                    .previous {
                      background-color: #f1f1f1;
                      color: black;
                    }

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

                    .round {
                      border-radius: 50%;
                    }

نمونه یک

<h2>دکمه های قبلی و بعدی</h2>

<a href="#" class="previous">&laquo; قبلی</a>

<a href="#" class="next">بعدی &raquo;</a>

<a href="#" class="previous round">&#8249;</a>

<a href="#" class="next round">&#8250;</a>

امتحان کنید

نمونه دکمه های بعدی و قبلی Next and Previous Buttons

آموزش طراحی دکمه ایکون در website آموزش طراحی منو برای دکمه بیشتر "More"

1399/12/27 4294 824

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما