Creative Arrow Navigation Styles For Slider
[Demo/Download] There are so many creative ways of showing those little elements that are an essential part of many websites nowadays. You can find them in content slideshows, as part of the page navigation, in image galleries and many more. These indicators are mostly represented as arrows that point to the left and right. There are of course arrows pointing up and down, too. But today we want to focus on the lateral ones and create some interesting hover effects that in some cases enhance the element, or show a preview of the content to come. These Creative Arrow effects are for your inspiration. Please note that they will only work in modern browsers. Also note that we are using the hover element state to show the effect which is not a solution for touch devices. An example for one of the style is the following: <nav class="nav-thumbflip"> <a class="prev" href="/item1"> <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span> <img src="img/9.png" alt="Previous thumb"/> </a> <a class="next" href="/item3"> <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
</a>
<img src="img/10.png" alt="Next thumb"/>
</nav>
The arrows are SVGs which we include using the technique described by Oleg Solomka in his article SVG Icons FTW. The CSS is the following for this example: .nav-thumbflip a { perspective: 1000px; } .nav-thumbflip a.prev { perspective-origin: 100% 50%; } .nav-thumbflip a.next { perspective-origin: 0% 50%; } .nav-thumbflip .icon-wrap { display: block; width: 100px; height: 100px; background-color: #b1a798; transition: background-color 0.3s; } .nav-thumbflip svg.icon { position: relative; top: 50%; transition: fill 0.3s; transform: translateY(-50%); fill: #fff; } .nav-thumbflip img { position: absolute; top: 0; transition: transform 0.3s; backface-visibility: hidden; } .nav-thumbflip a.prev img { left: 100%; transform: rotateY(90deg); transform-origin: 0% 50%; } .nav-thumbflip a.next img { right: 100%;
transform: rotateY(-90deg); transform-origin: 100% 50%; } .nav-thumbflip a:hover .icon-wrap { background-color: #fff; } .nav-thumbflip a:hover svg.icon { fill: #c1b8ab; } .nav-thumbflip a:hover img { transform: rotateY(0deg); }
Note that we have some common styles that will center the navigation anchor in the container.
[Demo/Download]