Skip to content

Instantly share code, notes, and snippets.

@irudoy
Created January 12, 2015 05:29
Show Gist options
  • Save irudoy/2773d0780890b4ac1072 to your computer and use it in GitHub Desktop.
Save irudoy/2773d0780890b4ac1072 to your computer and use it in GitHub Desktop.
<a href="#">
<svg version="1.1" class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" xml:space="preserve">
<g class="arrow-left">
<circle class="arrow-bg" cx="9.5" cy="9.5" r="9.5"/>
<polyline class="arrow-angle" points="11.32,12.965 9.556,11.233,7.68,9.5 9.5,7.767 11.32,6.035"/>
</g>
</svg>
</a>
<a href="#">
<svg version="1.1" class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" xml:space="preserve">
<g class="arrow-right">
<circle class="arrow-bg" cx="9.5" cy="9.5" r="9.5"/>
<polyline class="arrow-angle" points="7.68,12.965 9.444,11.233,11.32,9.5 9.5,7.767 7.68,6.035"/>
</g>
</svg>
</a>
<style>
.arrow-bg {
fill: #000; /* Цвет фона */
transition: all .1s ease-out;;
}
.arrow-angle {
fill: none;
stroke: #fff; /* Цвет стрелки */
stroke-miterlimit: 10;
transition: all .1s ease-out;;
}
.arrow:hover .arrow-bg {
fill: #DDD; /* Цвет фона :hover */
}
.arrow:hover .arrow-angle {
stroke: #000; /* Цвет стрелки :hover */
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment