Закруглённые стрелки «Назад» и «Вперёд» для навигации
Простые ссылки вперёд/назад для навигации с закруглеными стрелками на 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. Это тоже может быть интересно: