Закруглённые стрелки «Назад» и «Вперёд» для навигации

Простые ссылки вперёд/назад для навигации с закруглеными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента  :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

Давайте посмотрим код.

HTML:

<nav>
 <a href="#" id="prev">Prev</a>
 <a href="#" id="next">Next</a>
</nav>

CSS:

#next,
#prev {
    color: #333;
    display: inline-block;
    font: normal bold 4em Arial,sans-serif;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: auto;
}

#next,
#prev { padding: 0.5em 1.5em }

#next { text-align: right }

#next:before,
#next:after,
#prev:before,
#prev:after {
    background: #333;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
    content: "";
    display: block;
    height: 0.5em;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1em;
}

#prev:before,
#prev:after { left: 0 }

#next:before,
#prev:before {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#next:after,
#prev:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#prev:after,
#next:before { margin-top: -.36em }

#next:hover,
#next:focus,
#prev:hover,
#prev:focus { color: #c00 }

#next:hover:before,
#next:hover:after,
#next:focus:before,
#next:focus:after,
#prev:hover:before,
#prev:hover:after,
#prev:focus:before,
#prev:focus:after { background: #c00 }

/* container styles  */

nav { text-align: center }

Не поддерживаются браузеры:

  • Mozilla Firefox 3.5 и ниже.
  • Internet Explorer 8.0 и ниже.
  • Opera 10.0 и ниже.

А вот и пример:

Перевод статьи "Rounded Previous and Next Arrows" с сайта "cssdeck.com, автор Winston Wolf .

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.