a.button,a.button2{ /*display: inline-block;*/ /*vertical-align: middle;*/ padding: 1em; cursor: pointer; background:none; text-decoration: none; font-size: 1.2em; color: #666; /* Prevent highlight colour when element is tapped */ -webkit-tap-highlight-color: rgba(0,0,0,0); } .hover-buttons { padding: 2em 0; } .aligncenter { text-align: center; } .hover-buttons h1,.tr-effects h2{ font-size: 3em; color:#fff; font-family: 'Lora', serif; } ul.bt-list li{ display: inline-block; list-style: none; margin: 0.9em 0; } ul.bt-list li a{ margin-right:6px; } /* BACKGROUND TRANSITIONS */ /* Fade */ a.hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; background: #e84c3d; color:#fff; } a.hvr-fade:hover,a.hvr-fade:focus,a.hvr-fade:active { background-color:#ce2211; color: white; } a.hvr-back-pulse { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background-color; transition-property: color, background-color; background: #2ecd71; color: #fff; } a.hvr-back-pulse:hover,a.hvr-back-pulse:focus,a.hvr-back-pulse:active { -webkit-animation-name: hvr-back-pulse; animation-name: hvr-back-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color:#0CBC56; color: white; } /* Sweep To Right */ a.hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background:#3598dc; color: #fff; } a.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2178B4; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-sweep-to-right:hover,a.hvr-sweep-to-right:focus,a.hvr-sweep-to-right:active { color: white; } a.hvr-sweep-to-right:hover:before,a.hvr-sweep-to-right:focus:before,a.hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Left */ a.hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #9a59b5; color: #fff; } a.hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #853ba3; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-sweep-to-left:hover,a.hvr-sweep-to-left:focus,a.hvr-sweep-to-left:active { color: white; } a.hvr-sweep-to-left:hover:before,a.hvr-sweep-to-left:focus:before,a.hvr-sweep-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Bottom */ a.hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #e77e22; color: #fff; } a.hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#D56F16; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-sweep-to-bottom:hover,a.hvr-sweep-to-bottom:focus,a.hvr-sweep-to-bottom:active { color: white; } a.hvr-sweep-to-bottom:hover:before,a.hvr-sweep-to-bottom:focus:before,a.hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Sweep To Top */ a.hvr-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #136EAC; color:#fff; } a.hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#0C649F; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-sweep-to-top:hover,a.hvr-sweep-to-top:focus,a.hvr-sweep-to-top:active { color: white; } a.hvr-sweep-to-top:hover:before,a.hvr-sweep-to-top:focus:before,a.hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Bounce To Right */ a.hvr-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: #f2c40f; color: #fff; } a.hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#E6B806; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-bounce-to-right:hover,a.hvr-bounce-to-right:focus,a.hvr-bounce-to-right:active { color: white; } a.hvr-bounce-to-right:hover:before,a.hvr-bounce-to-right:focus:before,a.hvr-bounce-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Left */ a.hvr-bounce-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: #17a086; color: #fff; } a.hvr-bounce-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#11856F; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-bounce-to-left:hover,a.hvr-bounce-to-left:focus,a.hvr-bounce-to-left:active { color: white; } .hvr-bounce-to-left:hover:before,a.hvr-bounce-to-left:focus:before,a.hvr-bounce-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Bottom */ a.hvr-bounce-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: #d02818; color: #fff; } a.hvr-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#eb301d; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-bounce-to-bottom:hover,a.hvr-bounce-to-bottom:focus,a.hvr-bounce-to-bottom:active { color: white; } a.hvr-bounce-to-bottom:hover:before,a.hvr-bounce-to-bottom:focus:before,a.hvr-bounce-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Top */ a.hvr-bounce-to-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: #93a4a4; color: #fff; } a.hvr-bounce-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#818D8D; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-bounce-to-top:hover,a.hvr-bounce-to-top:focus,a.hvr-bounce-to-top:active { color: white; } a.hvr-bounce-to-top:hover:before,a.hvr-bounce-to-top:focus:before,a.hvr-bounce-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Radial Out */ a.hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #1cbab8; color: #fff; } a.hvr-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#099492; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-radial-out:hover,a.hvr-radial-out:focus,a.hvr-radial-out:active { color: white; } a.hvr-radial-out:hover:before,a.hvr-radial-out:focus:before,a.hvr-radial-out:active:before { -webkit-transform: scale(2); transform: scale(2); } /* Radial In */ a.hvr-radial-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background:#d51694; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; } a.hvr-radial-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#AB0C75; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-radial-in:hover,a.hvr-radial-in:focus,a.hvr-radial-in:active { color: white; } a.hvr-radial-in:hover:before,a.hvr-radial-in:focus:before,a.hvr-radial-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle In */ a.hvr-rectangle-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #6aa84f; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; } a.hvr-rectangle-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #4e8735; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-rectangle-in:hover,a.hvr-rectangle-in:focus,a.hvr-rectangle-in:active { color: white; } a.hvr-rectangle-in:hover:before,a.hvr-rectangle-in:focus:before,a.hvr-rectangle-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle Out */ a.hvr-rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background:#5384b1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; } a.hvr-rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #6fa8dc; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-rectangle-out:hover,a.hvr-rectangle-out:focus,a.hvr-rectangle-out:active { color: white; } a.hvr-rectangle-out:hover:before,a.hvr-rectangle-out:focus:before,a.hvr-rectangle-out:active:before { -webkit-transform: scale(1); transform: scale(1); } /* Shutter In Horizontal */ a.hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #93940d; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; } a.hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #b8b926; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-shutter-in-horizontal:hover,a.hvr-shutter-in-horizontal:focus,a.hvr-shutter-in-horizontal:active { color: white; } a.hvr-shutter-in-horizontal:hover:before,a.hvr-shutter-in-horizontal:focus:before,a.hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: scaleX(0); } /* Shutter Out Horizontal */ a.hvr-shutter-out-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; background: #ff9900; color: #fff; } a.hvr-shutter-out-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #ed9005; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-shutter-out-horizontal:hover,a.hvr-shutter-out-horizontal:focus,a.hvr-shutter-out-horizontal:active { color: white; } a.hvr-shutter-out-horizontal:hover:before,a.hvr-shutter-out-horizontal:focus:before,a.hvr-shutter-out-horizontal:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Shutter In Vertical */ a.hvr-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background:#c55e3a; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #fff; } a.hvr-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background:#ff6600; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-shutter-in-vertical:hover,a.hvr-shutter-in-vertical:focus,a.hvr-shutter-in-vertical:active { color: white; } a.hvr-shutter-in-vertical:hover:before,a.hvr-shutter-in-vertical:focus:before,a.hvr-shutter-in-vertical:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } /* Shutter Out Vertical */ a.hvr-shutter-out-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #ff339a; color: #fff; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } a.hvr-shutter-out-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #dc0c75; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-shutter-out-vertical:hover,a.hvr-shutter-out-vertical:focus,a.hvr-shutter-out-vertical:active { color: white; } a.hvr-shutter-out-vertical:hover:before,a.hvr-shutter-out-vertical:focus:before,a.hvr-shutter-out-vertical:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* BORDER TRANSITIONS */ a.button2{ padding: 1em; cursor: pointer; background:#eee; text-decoration: none; font-size: 1.2em; color: #fff; } ul.border-list li{ display: inline-block; list-style: none; margin:1em 0; } ul.border-list a{ margin-right:8px; } /* Border Fade */ a.hvr-border-fade { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; background:#38aa38; transition-property: box-shadow; box-shadow: inset 0 0 0 4px #38aa38;, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } a.hvr-border-fade:hover,a.hvr-border-fade:focus,a.hvr-border-fade:active { box-shadow: inset 0 0 0 4px #fff, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Hollow */ a.hvr-hollow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; box-shadow: inset 0 0 0 4px #a9b3bd, 0 0 1px rgba(0, 0, 0, 0); background: #a9b3bd; /* Hack to improve aliasing on mobile/tablet devices */ } a.hvr-hollow:hover,a.hvr-hollow:focus,a.hvr-hollow:active { background: none; } /* Trim */ a.hvr-trim { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #ff3233; } a.hvr-trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } a.hvr-trim:hover:before,a.hvr-trim:focus:before,a.hvr-trim:active:before { opacity: 1; } /* Ripple Out */ @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } a.hvr-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #4b78cd; } a.hvr-ripple-out:before { content: ''; position: absolute; border: #4b78cd solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } a.hvr-ripple-out:hover:before,a.hvr-ripple-out:focus:before,a.hvr-ripple-out:active:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out; } /* Outline Out */ a.hvr-outline-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #ff6500; } a.hvr-outline-out:before { content: ''; position: absolute; border: #ff6500 solid 4px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } a.hvr-outline-out:hover:before,a.hvr-outline-out:focus:before,a.hvr-outline-out:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; } /* Outline In */ a.hvr-outline-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #ff339a; } a.hvr-outline-in:before { pointer-events: none; content: ''; position: absolute; border: #ff339a solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } a.hvr-outline-in:hover:before,a.hvr-outline-in:focus:before,a.hvr-outline-in:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* Round Corners */ a.hvr-round-corners { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: border-radius; transition-property: border-radius; background: #720e9e; } a.hvr-round-corners:hover,a.hvr-round-corners:focus,a.hvr-round-corners:active { border-radius: 1em; } /* Underline From Left */ a.hvr-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #c8232c; } a.hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background:#38aa38; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-underline-from-left:hover:before,a.hvr-underline-from-left:focus:before,a.hvr-underline-from-left:active:before { right: 0; } /* Underline From Center */ a.hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } a.hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #2098d1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-underline-from-center:hover:before,a.hvr-underline-from-center:focus:before,a.hvr-underline-from-center:active:before { left: 0; right: 0; } /* Underline From Right */ a.hvr-underline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #34526f; } a.hvr-underline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background: #c8232c; } a.hvr-underline-from-right:hover:before,a.hvr-underline-from-right:focus:before,a.hvr-underline-from-right:active:before { left: 0; } /* Overline From Left */ a.hvr-overline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #b41494; } a.hvr-overline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #2098d1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-overline-from-left:hover:before,a.hvr-overline-from-left:focus:before,a.hvr-overline-from-left:active:before { right: 0; } /* Overline From Center */ a.hvr-overline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background:#fc4f08; } a.hvr-overline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; top: 0; background: #2098d1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-overline-from-center:hover:before,a.hvr-overline-from-center:focus:before,a.hvr-overline-from-center:active:before { left: 0; right: 0; } /* Overline From Right */ a.hvr-overline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #f2c40f; } a.hvr-overline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; top: 0; background:#c8232c; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-overline-from-right:hover:before,a.hvr-overline-from-right:focus:before,a.hvr-overline-from-right:active:before { left: 0; } /* Reveal */ a.hvr-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #00aff0; } a.hvr-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-color: #075876; border-style: solid; border-width: 0; -webkit-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-reveal:hover:before,a.hvr-reveal:focus:before,a.hvr-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); border-width: 4px; } /* Underline Reveal */ a.hvr-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #fb8928; } a.hvr-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background:#c8232c; height: 4px; -webkit-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-underline-reveal:hover:before,a.hvr-underline-reveal:focus:before,a.hvr-underline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* Overline Reveal */ a.hvr-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #2f9259; } a.hvr-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background:#C8232C; height: 4px; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } a.hvr-overline-reveal:hover:before,a.hvr-overline-reveal:focus:before,a.hvr-overline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); }