Simple css3 animated arrow buttons. Quickly customized though SCSS variable settings.
A Pen by J Scott Smith on CodePen.
Created
January 10, 2016 14:40
-
-
Save tiberiomarco01/727616b4be4d5064ec88 to your computer and use it in GitHub Desktop.
Quick Arrows with Borders
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <p class="saying">Hi There!</p> | |
| <p class="saying hidden">See Ya Later.</p> | |
| <a href="#prev" class="prev">Prev</a> | |
| <a href="#next" class="next">Next</a> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( document ).ready(function() { | |
| var prev = $(".prev"); | |
| var next = $(".next"); | |
| var saying = $(".saying"); | |
| prev.on('click', function() { | |
| saying.toggleClass('hidden'); | |
| }); | |
| next.on('click', function() { | |
| saying.toggleClass('hidden'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/css3"; | |
| // Adjust settings for some quick and nifty arrows | |
| // Arrow Style Settings | |
| $arrow-size: 2em; | |
| $border-width: 2px; | |
| $border-type: solid; // solid, dotted, double, groove, ridge | |
| $border-arrow-side: $border-width $border-type rgba(white,.75); | |
| $border-arrow-side-hover: $border-width $border-type white; | |
| $border-arrow-side-click: $border-width $border-type rgba(black,.65); | |
| // Scaling, Transistioning | |
| $scale-hover: 1.05; | |
| $scale-active: 1.025; | |
| $scale-hover-speed: 100ms; | |
| $scale-active-speed: 50ms; | |
| // Hover Area Style Settings | |
| $ha-size: 3.5; // arrow size * n | |
| $ha-border: $border-arrow-side; | |
| $ha-bg: none; // rgba(white,.25) | |
| $ha-hover-bg: rgba(black,.05); | |
| $ha-active-bg: rgba(white,.1); | |
| $ha-border-radius: 5%; | |
| .prev, | |
| .next { | |
| @include transition(transform, $scale-hover-speed); | |
| position: absolute; | |
| display: block; | |
| box-sizing: border-box; | |
| width: $arrow-size * $ha-size; | |
| height: $arrow-size * $ha-size; | |
| // Fix jumpy transitions | |
| transform: translatez(0); | |
| @include backface-visibility( hidden ); | |
| // Hide Text | |
| text-indent: 100%; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| // Optional Styling | |
| background-color: $ha-bg; | |
| border: $ha-border; | |
| border-radius: $ha-border-radius; | |
| &:after { | |
| @include transition(transform, $scale-hover-speed); | |
| position: absolute; | |
| box-sizing: border-box; | |
| border-top: $border-arrow-side; | |
| border-left: $border-arrow-side; | |
| content: ""; | |
| width: $arrow-size; | |
| height: $arrow-size; | |
| top: 50%; | |
| margin-top: - ($arrow-size / 2); | |
| } | |
| } | |
| .prev { | |
| left: 0; | |
| &:after { | |
| @include rotate(-45deg); | |
| border-top: $border-arrow-side; | |
| border-left: $border-arrow-side; | |
| left: 56%; | |
| margin-left: - ($arrow-size / 2); | |
| } | |
| } | |
| .next { | |
| right: 0; | |
| &:after { | |
| @include rotate(135deg); | |
| border-top: $border-arrow-side; | |
| border-left: $border-arrow-side; | |
| right: 56%; | |
| margin-right: - ($arrow-size / 2); | |
| } | |
| } | |
| // Hover states | |
| .prev:hover, | |
| .next:hover { | |
| @include transform( scale($scale-hover) ); | |
| background-color: $ha-hover-bg; | |
| &:after { | |
| border-top: $border-arrow-side-hover; | |
| border-left: $border-arrow-side-hover; | |
| } | |
| } | |
| .prev:hover { | |
| &:after { | |
| @include transform( rotate(-45deg) scale($scale-hover) ); | |
| } | |
| } | |
| .next:hover { | |
| &:after { | |
| @include transform( rotate(135deg) scale($scale-hover) ); | |
| } | |
| } | |
| // Active states | |
| .prev:active, | |
| .next:active { | |
| @include transition(transform, $scale-active-speed); | |
| @include transform( scale($scale-active) ); | |
| background-color: $ha-active-bg; | |
| &:after { | |
| border-top: $border-arrow-side-click; | |
| border-left: $border-arrow-side-click; | |
| } | |
| } | |
| .prev:active { | |
| &:after { | |
| @include transform( rotate(-45deg) scale($scale-active) ); | |
| } | |
| } | |
| .next:active { | |
| &:after { | |
| @include transform( rotate(135deg) scale($scale-active) ); | |
| } | |
| } | |
| // Unecessary Page styling | |
| body { | |
| background-color: salmon; | |
| } | |
| .container { | |
| position: relative; | |
| margin: 0 auto; | |
| max-width: 640px; | |
| padding: 4em; | |
| overflow: visible; | |
| } | |
| .saying { | |
| @include transition(opacity, 400ms); | |
| position: absolute; | |
| width: 100%; | |
| left: 0; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-size: 2em; | |
| font-weight: 100; | |
| color: rgba(black,.65); | |
| text-align: center; | |
| opacity: 1; | |
| } | |
| .hidden { | |
| opacity: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment