Posted in
13786
11:46 pm, October 19, 2021
A Collection of Button Hover Over Effects
What is it?
A Large collection of buttons with hover over animations and styles.
What can i use this for?
You can use these to make the buttons on your website or web project more animated
Conclusion
A Great collection of button animations and hover over effects that you can add to your own project or use as inspiration for buttons.
Original Source
Thanks to the author enjeck, this code comes from enjeck buttons.
A Collection of Button Hover Over Effects Demo
View Demo Full Screen View Demo New Tab
A Collection of Button Hover Over Effects Code
HTML
<div id="buttons">
<div class="buttons-section">
<h2> Slide from bottom right</h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--orange"><span>Click me</span></button>
</div>
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--pink"><span>Click me</span></button>
</div>
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--blue"><span>Click me</span></button>
</div>
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--red"><span>Click me</span></button>
</div>
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--green"><span>Click me</span></button>
</div>
<div class="btn-container">
<button class="btn btn-slide-bottom btn-slide-bottom--yellow"><span>Click me</span></button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Subtle moving gradient </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--orange">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--pink">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--blue">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--red">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--green">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-moving-gradient btn-moving-gradient--purple">Click Me</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Rectangular to rounded </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--black">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--pink">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--blue">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--red">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--green">Click Me</button>
</div>
<div class="btn-container">
<button class="btn btn-rect-to-round btn-rect-to-round--orange">Click Me</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Slide and show </h2>
<div class="btn-box">
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--orange">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--pink">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--red">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--blue">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--green">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn btn-slide-show">
<p class="btn-slide-show-text1">Click me</p>
<div class="btn-slide-show-inner btn-slide-show-inner--gray">
<p class="btn-slide-show-text2"> >> </p>
</div>
</div>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Fill on hover </h2>
<div class="btn-box">
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--gray">Click me
</span>
</div>
</div>
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--orange">Click me
</span>
</div>
</div>
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--purple">Click me
</span>
</div>
</div>
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--red">Click me
</span>
</div>
</div>
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--blue">Click me
</span>
</div>
</div>
<div class="btn-container">
<div class="btn btn-fill-center">
<span class="btn-fill-center-text btn-fill-center-text--green">Click me
</span>
</div>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Border to line </h2>
<div class="btn-box">
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--gray">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--orange">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--blue">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--red">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--green">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-border-to-line">
<button class="btn-border-to-line-text btn-border-to-line-text--purple">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Click me
</button>
</div>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Text stretch </h2>
<div class="btn-box">
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--gray">Click me</a>
</div>
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--red">Click me</a>
</div>
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--green">Click me</a>
</div>
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--blue">Click me</a>
</div>
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--orange">Click me</a>
</div>
<div class="btn-container">
<a href="#" class="btn btn-text-stretch btn-text-stretch--pink">Click me</a>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Shine effect </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--gray">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--orange">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--red">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--blue">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--green">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shine-effect btn-shine-effect--purple">
<span class="btn-shine-effect-span">Click me</span>
</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Swipe left </h2>
<div class="btn-box">
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--black" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--orange" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--red" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--blue" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--green" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-swipe-left btn-swipe-left--purple" href="#"><span> Click me </span></a>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Double swipe </h2>
<div class="btn-box">
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--black" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--orange" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--red" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--blue" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--green" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-double-swipe btn-double-swipe--purple" href="#"><span> Click me </span></a>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Diagonal half swipe </h2>
<div class="btn-box">
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--orange" href="#"><span>Click me</span></a>
</div>
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--pink" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--red" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--blue" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--green" href="#"><span> Click me </span></a>
</div>
<div class="btn-container">
<a class="btn btn-half-swipe btn-half-swipe--gray" href="#"><span> Click me </span></a>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Shadow drop </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--black">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--orange">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--red">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--blue">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--green">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow-drop btn-shadow-drop--purple">Click me</button>
</div>
</div>
</div>
<div class="buttons-section neumorphic-section">
<h2> Neumorphic enabled and disabled</h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn neumorphic neumorphic-enabled"> <span> Click me </span> </button>
</div>
<div class="btn-container">
<button class="btn neumorphic neumorphic-disabled"> <span> Click me </span> </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Layered 3d </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--orange">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--pink">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--red">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--blue">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--green">Click me</button>
</div>
<div class="btn-container">
<button class="btn btn-layered-3d btn-layered-3d--purple">Click me</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Slide arrow </h2>
<div class="btn-box">
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--black">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--blue">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--orange">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--red">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--purple">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
<div class="btn-container">
<div class="btn btn-arrow-slide">
<button class="btn-arrow-slide-cont btn-arrow-slide-cont--green">
<span class="btn-arrow-slide-circle" aria-hidden="true">
<span class="btn-arrow-slide-icon btn-arrow-slide-arrow"></span>
</span>
<span class="btn-arrow-slide-text"> Click me </span>
</button>
</div>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Bottom stripe </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-bottom-stripe btn-bottom-stripe--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Draw border </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--pink"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-draw-border btn-draw-border--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Striped shadow 3d </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--black">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--orange">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--red">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--green">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--blue">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-striped-shadow btn-striped-shadow--purple">
<span>Click me</span>
</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> 3d flip side </h2>
<div class="btn-box">
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--black">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--orange">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--red">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--blue">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--green">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
<div class="btn-container">
<div class="btn-flip-side-cont">
<div class="btn btn-flip-side btn-flip-side--purple">
<span>Hover here</span>
<span>Click me</span>
</div>
</div>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Flashy background slide </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--orange"></div>
</button>
</div>
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--pink"></div>
</button>
</div>
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--red"></div>
</button>
</div>
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--blue"></div>
</button>
</div>
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--green"></div>
</button>
</div>
<div class="btn-container">
<button class="btn btn-background-slide">
Click me
<div class="btn-background-slide-bg btn-background-slide--purple"></div>
</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Shadow </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--orange">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--black">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--red">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--purple">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--blue">
<span>Click me</span>
</button>
</div>
<div class="btn-container">
<button class="btn btn-shadow btn-shadow--green">
<span>Click me</span>
</button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Pushable </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-pushable btn-pushable--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Fill bottom right </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-fill-bottom btn-fill-bottom--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Fill down </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-down btn-down--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-down btn-down--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-down btn-down--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-down btn-down--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-down btn-down--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-down btn-down--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Flash slide </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn flash-slide flash-slide--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn flash-slide flash-slide--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn flash-slide flash-slide--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn flash-slide flash-slide--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn flash-slide flash-slide--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn flash-slide flash-slide--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Zoom Out</h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn zoom-out zoom-out--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn zoom-out zoom-out--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn zoom-out zoom-out--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn zoom-out zoom-out--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn zoom-out zoom-out--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn zoom-out zoom-out--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Fill center </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn fill-center fill-center--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn fill-center fill-center--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn fill-center fill-center--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn fill-center fill-center--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn fill-center fill-center--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn fill-center fill-center--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Sign post </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn sign-post sign-post-back"> Click me </button>
</div>
<div class="btn-container">
<button class="btn sign-post sign-post-forward"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> 3d top </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn btn-top-3d btn-top-3d--purple"> Click me </button>
</div>
</div>
</div>
<div class="buttons-section">
<h2> Border flip </h2>
<div class="btn-box">
<div class="btn-container">
<button class="btn border-flip border-flip--black"> Click me </button>
</div>
<div class="btn-container">
<button class="btn border-flip border-flip--orange"> Click me </button>
</div>
<div class="btn-container">
<button class="btn border-flip border-flip--red"> Click me </button>
</div>
<div class="btn-container">
<button class="btn border-flip border-flip--blue"> Click me </button>
</div>
<div class="btn-container">
<button class="btn border-flip border-flip--green"> Click me </button>
</div>
<div class="btn-container">
<button class="btn border-flip border-flip--purple"> Click me </button>
</div>
</div>
</div>
</div>CSS
.btn-box{
margin: auto;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.buttons-section{
margin-top: 80px;
}
.btn-container{
height:80px;
width:230px;
margin:auto;
position:relative;
z-index:0;
}
.btn{
display:block;
margin:auto;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
position: relative;
cursor: pointer;
}
/* Slide from bottom */
.btn-slide-bottom {
border: none;
display: block;
text-align: center;
cursor: pointer;
overflow: hidden;
color: #fff !important;
font-weight: 700;
font-size: 15px;
background-color: #333;
padding: 17px 45px;
transition: all .5s ease-in-out;
}
.btn-slide-bottom span {
position: relative;
z-index: 1;
}
.btn-slide-bottom:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn-slide-bottom:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.btn-slide-bottom--orange:after{
background: #FEAE00;
}
.btn-slide-bottom--pink:after{
background: #FF6392;
}
.btn-slide-bottom--blue:after{
background: #3A86FF;
}
.btn-slide-bottom--red:after{
background: #EF233C;
}
.btn-slide-bottom--green:after{
background: #80ED99;
}
.btn-slide-bottom--yellow:after{
background:#3D348B;
}
/* Subtle moving gradient with shadow */
.btn-moving-gradient{
height: 55px;
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
border: none;
background-size: 300% 100%;
border-radius: 50px;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.btn-moving-gradient:hover {
background-position: 100% 0;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.btn-moving-gradient--orange{
background-image: linear-gradient(to right, hsl(31, 100%, 50%), hsl(45, 100%, 50%), hsl(41, 100%, 50%) , #FBB03B);
box-shadow: 0 4px 15px 0 hsl(45, 100%, 40%);
}
.btn-moving-gradient--pink{
background-image: linear-gradient(to right,hsl(332, 100%, 69%), hsl(390, 100%, 69%), hsl(360, 100%, 69%) , #FF6392);
box-shadow: 0 4px 15px 0 hsl(370, 100%, 69%);
}
.btn-moving-gradient--blue{
background-image: linear-gradient(to right,hsl(217, 100%, 62%), hsl(280, 100%, 62%), hsl(260, 100%, 62%) , #3A86FF);
box-shadow: 0 4px 15px 0 hsl(280, 100%, 62%);
}
.btn-moving-gradient--red{
background-image: linear-gradient(to right,hsl(353, 86%, 54%), hsl(393, 86%, 54%), hsl(380, 86%, 54%) , #EF233C);
box-shadow: 0 4px 15px 0 hsl(393, 86%, 54%);
}
.btn-moving-gradient--green{
background-image: linear-gradient(to right,hsl(134, 75%, 72%), hsl(184, 75%, 72%), hsl(154, 75%, 72%) , #80ED99);
box-shadow: 0 4px 15px 0 hsl(184, 75%, 72%);
}
.btn-moving-gradient--purple{
background-image: linear-gradient(to right,hsl(246, 45%, 38%), hsl(296, 45%, 38%), hsl(276, 45%, 38%) , #3D348B);
box-shadow: 0 4px 15px 0 hsl(296, 45%, 38%);
}
/* Rectangular to rounded */
.btn-rect-to-round {
height: 55px;
width: 200px;
font-size: 16px;
font-weight: 600;
background:transparent;
cursor: pointer;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.btn-rect-to-round:hover{
border-radius: 60px;
color: #fff !important;
}
.btn-rect-to-round--black{
color: #333 !important;
border: 2px solid #333;
}
.btn-rect-to-round--black:hover{
border-color:#333;
background: #333;
}
.btn-rect-to-round--pink{
color: #FF6392 !important;
border: 2px solid #FF6392;
}
.btn-rect-to-round--pink:hover{
border-color:#FF6392;
background: #FF6392;
}
.btn-rect-to-round--blue{
color: #3A86FF !important;
border: 2px solid #3A86FF;
}
.btn-rect-to-round--blue:hover{
border-color:#3A86FF;
background: #3A86FF;
}
.btn-rect-to-round--red{
color: #EF233C!important;
border: 2px solid #EF233C;
}
.btn-rect-to-round--red:hover{
border-color:#EF233C;
background: #EF233C;
}
.btn-rect-to-round--green{
color: #80ED99!important;
border: 2px solid #80ED99;
}
.btn-rect-to-round--green:hover{
border-color:#80ED99;
background: #80ED99;
}
.btn-rect-to-round--orange{
color: #FEAE00 !important;
border: 2px solid #FEAE00;
}
.btn-rect-to-round--orange:hover{
border-color:#FEAE00;
background: #FEAE00;
}
/* Slide and show more text */
.btn-slide-show {
background: #333;
width : 200px;
height : 50px;
overflow: hidden;
text-align : center;
transition : .4s;
cursor : pointer;
border-radius: 3px;
font-weight:bold;
}
.btn-slide-show-inner {
position : relative;
width : 200px;
height : 100px;
margin-top: -100px;
padding-top: 2px;
left : -250px;
transition : .5s;
}
.btn-slide-show-text1 {
color : #fff;
font-weight:bold;
margin-top : 15px;
transition: all .5s ease-in-out;
}
.btn-slide-show-text2 {
margin-top : 65px;
margin-right : -130px;
color : #FFF;
font-weight:bold;
}
.btn-slide-show:hover .btn-slide-show-inner{
left: -130px;
}
.btn:hover .btn-slide-show-text1{
margin-left : 65px;
}
.btn-slide-show-inner--orange{
background : #FEAE00;
}
.btn-slide-show-inner--pink{
background : #FF6392;
}
.btn-slide-show-inner--blue{
background : #3A86FF;
}
.btn-slide-show-inner--red{
background : #EF233C;
}
.btn-slide-show-inner--green{
background : #80ED99;
}
.btn-slide-show-inner--gray{
background : #eee;
}
/* Fill center */
.btn-fill-center {
text-align: center;
cursor:pointer;
text-transform:uppercase;
font-weight:bold;
transition: all .5s ease-in;
}
.btn-fill-center-text {
display: block;
max-width: 160px;
text-decoration: none;
border-radius: 4px;
padding: 13px 50px;
-webkit-transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all 800ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}
.btn-fill-center-text--gray {
color: #333;
border: 2px solid #333;
}
.btn-fill-center-text--gray:hover {
color: #fff;
box-shadow: #333 0 0px 0px 40px inset;
}
.btn-fill-center-text--orange {
color: #FEAE00;
border: 2px solid #FEAE00;
}
.btn-fill-center-text--orange:hover {
color: #fff;
box-shadow: #FEAE00 0 0px 0px 40px inset;
}
.btn-fill-center-text--blue {
color: #3A86FF;
border: 2px solid #3A86FF;
}
.btn-fill-center-text--blue:hover {
color: #fff;
box-shadow: #3A86FF 0 0px 0px 40px inset;
}
.btn-fill-center-text--purple {
color: #3D348B;
border: 2px solid #3D348B;
}
.btn-fill-center-text--purple:hover {
color: #fff;
box-shadow: #3D348B 0 0px 0px 40px inset;
}
.btn-fill-center-text--red {
color: #EF233C;
border: 2px solid #EF233C;
}
.btn-fill-center-text--red:hover {
color: #fff;
box-shadow: #EF233C 0 0px 0px 40px inset;
}
.btn-fill-center-text--green {
color: #80ED99;
border: 2px solid #80ED99;
}
.btn-fill-center-text--green:hover {
color: #fff;
box-shadow: #80ED99 0 0px 0px 40px inset;
}
/* Border to line */
.btn-border-to-line{
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
}
.btn-border-to-line-text{
cursor: pointer;
font-size:16px;
text-transform: uppercase;
width: 200px;
position: relative;
padding: 10px;
padding-top: 15px;
padding-left:60px;
padding-right:60px;
text-decoration: none;
transition: all .6s ease-in;
background: transparent;
outline: none;
border: 0;
}
.btn-border-to-line-text:hover {
font-weight:bold;
}
.btn-border-to-line-text svg {
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.btn-border-to-line-text rect {
fill: none;
stroke-width: 4;
stroke-dasharray: 412, 0;
transition: all 0.5s linear;
}
.btn-border-to-line-text:hover rect {
stroke-width: 5;
stroke-dasharray: 23, 365;
stroke-dashoffset: 58;
transition: all 1.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-border-to-line-text--gray {
color: #333;
}
.btn-border-to-line-text--gray rect {
stroke: #333;
}
.btn-border-to-line-text--orange {
color: #FEAE00;
}
.btn-border-to-line-text--orange rect {
stroke: #FEAE00;
}
.btn-border-to-line-text--blue {
color: #3A86FF;
}
.btn-border-to-line-text--blue rect {
stroke: #3A86FF;
}
.btn-border-to-line-text--red {
color: #EF233C;
}
.btn-border-to-line-text--red rect {
stroke: #EF233C;
}
.btn-border-to-line-text--green {
color: #80ED99;
}
.btn-border-to-line-text--green rect {
stroke: #80ED99;
}
.btn-border-to-line-text--purple {
color: #3D348B;
}
.btn-border-to-line-text--purple rect {
stroke: #3D348B;
}
/* Text strength */
.btn-text-stretch {
letter-spacing: 0;
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
cursor: pointer;
font-size:16px;
font-weight: 400;
line-height: 45px;
margin: 0 0 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
text-align:center;
padding-left:10px;
padding-right:10px;
font-family: "lato", serif;
}
.btn-text-stretch:hover, .btn-text-stretch:active {
letter-spacing: 5px;
}
.btn-text-stretch:after, .btn-text-stretch:before {
backface-visibility: hidden;
border: 1.5px solid transparent;
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 400ms ease-in-out;
width: 0;
}
.btn-text-stretch:hover:after, .btn-text-stretch:hover:before {
backface-visibility: hidden;
transition: width 500ms ease-in-out;
width: 70%;
}
.btn-text-stretch:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
.btn-text-stretch--gray{
color:#333
}
.btn-text-stretch--gray:hover:after, .btn-text-stretch--gray:hover:before {
border-color: #333;
}
.btn-text-stretch--red {
color:#EF233C;
}
.btn-text-stretch--red:hover:after, .btn-text-stretch--red:hover:before {
border-color: #EF233C;
}
.btn-text-stretch--orange {
color:#FEAE00;
}
.btn-text-stretch--orange:hover:after, .btn-text-stretch--orange:hover:before {
border-color: #FEAE00;
}
.btn-text-stretch--blue{
color:#3A86FF;
}
.btn-text-stretch--blue:hover:after, .btn-text-stretch--blue:hover:before {
border-color: #3A86FF;
}
.btn-text-stretch--green{
color:#80ED99;
}
.btn-text-stretch--green:hover:after, .btn-text-stretch--green:hover:before {
border-color: #80ED99;
}
.btn-text-stretch--pink{
color:#FF6392;
}
.btn-text-stretch--pink:hover:after, .btn-text-stretch--pink:hover:before {
border-color: #FF6392;
}
/* Shine effect */
.btn-shine-effect {
box-sizing: inherit;
transition-property: all;
transition-duration: .6s;
transition-timing-function: ease;
overflow: hidden;
position: relative;
cursor: pointer;
font-size:16px;
font-weight: 400;
line-height: 45px;
margin: 0 0 2em;
max-width: 180px;
position: relative;
width: 100%;
background: #f9f9f9;
}
.btn-shine-effect span {
z-index: 20;
}
.btn-shine-effect-span:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .8;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 19;
}
.btn-shine-effect:hover .btn-shine-effect-span:after{
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-shine-effect--gray {
color: #333;
border: 2px solid #333;
}
.btn-shine-effect--orange {
color: #FEAE00;
border: 2px solid #FEAE00;
}
.btn-shine-effect--red {
color: #EF233C;
border: 2px solid #EF233C;
}
.btn-shine-effect--blue {
color: #3A86FF;
border: 2px solid #3A86FF;
}
.btn-shine-effect--green {
color: #80ED99;
border: 2px solid #80ED99;
}
.btn-shine-effect--purple {
color: #3D348B;
border: 2px solid #3D348B;
}
/* Swipe right */
.btn-swipe-left {
display: block;
overflow: hidden;
text-align: center;
max-width: 180px;
padding:10px;
margin: auto;
text-transform: uppercase;
text-decoration: none;
transition: all 0.5s ease-in-out;
font-family: "lato", serif;
}
.btn-swipe-left:before {
content: '';
transform: translateX(-150%);
-webkit-transform: translateX(-150%);
position:absolute;
left:0;
top: 0;
height: 140%;
width: 240%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.btn-swipe-left span{
z-index:2;
position:relative;
transition: all 0.5s ease-in-out;
}
.btn-swipe-left:hover span {
color: #fff;
}
.btn-swipe-left:hover:before {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.btn-swipe-left--black {
color: #333;
border: 2px solid #333;
}
.btn-swipe-left--black:before {
background-color: #333;
}
.btn-swipe-left--orange {
color: #FEAE00;
border: 2px solid #FEAE00;
}
.btn-swipe-left--orange:before {
background-color: #FEAE00;
}
.btn-swipe-left--red {
color: #EF233C;
border: 2px solid #EF233C;
}
.btn-swipe-left--red:before {
background-color: #EF233C;
}
.btn-swipe-left--blue {
color: #3A86FF;
border: 2px solid #3A86FF;
}
.btn-swipe-left--blue:before {
background-color: #3A86FF;
}
.btn-swipe-left--green {
color: #80ED99;
border: 2px solid #80ED99;
}
.btn-swipe-left--green:before {
background-color: #80ED99;
}
.btn-swipe-left--purple {
color: #3D348B;
border: 2px solid #3D348B;
}
.btn-swipe-left--purple:before {
background-color: #3D348B;
}
/* Double swipe */
.btn-double-swipe {
display: block;
overflow: hidden;
text-align: center;
padding:10px 20px;
margin: auto;
text-transform: uppercase;
text-decoration: none;
transition: all 0.5s ease-in-out;
max-width: 150px;
}
.btn-double-swipe:before, .btn-double-swipe:after {
content: "";
position: absolute;
height: 490%;
top:0;
width: 120%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn-double-swipe:before {
right: -50px;
border-right: 50px solid transparent;
transform: translateX(-100%) ;
-webkit-transform: translateX(-100%);
}
.btn-double-swipe:after {
left: -50px;
border-left: 50px solid transparent;
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
.btn-double-swipe span{
position:relative;
transition: all 0.5s ease-in-out;
z-index:4;
}
.btn-double-swipe:hover span {
opacity:0.9;
color:#fff;
}
.btn-double-swipe:hover:before {
transform: translateX(-40%);
}
.btn-double-swipe:hover:after {
transform: translateX(40%);
}
.btn-double-swipe--black {
color: #333;
border: 2px solid #333;
}
.btn-double-swipe--black:before, .btn-double-swipe--black:after {
background: #333 !important;
}
.btn-double-swipe--orange {
border: 2px solid #FEAE00;
color:#FEAE00;
}
.btn-double-swipe--orange:before, .btn-double-swipe--orange:after {
background: #FEAE00;
}
.btn-double-swipe--red {
border: 2px solid #EF233C;
color:#EF233C;
}
.btn-double-swipe--red:before, .btn-double-swipe--red:after {
background: #EF233C;
}
.btn-double-swipe--blue {
border: 2px solid #3A86FF;
color:#3A86FF;
}
.btn-double-swipe--blue:before, .btn-double-swipe--blue:after {
background: #3A86FF;
}
.btn-double-swipe--green {
border: 2px solid #80ED99;
color:#80ED99;
}
.btn-double-swipe--green:before, .btn-double-swipe--green:after {
background: #80ED99;
}
.btn-double-swipe--purple {
border: 2px solid #3D348B;
color:#3D348B;
}
.btn-double-swipe--purple:before, .btn-double-swipe--purple:after {
background: #3D348B;
}
/* Diagonal half swipe */
.btn-half-swipe {
display: block;
overflow: hidden;
padding:10px;
width: 180px;
text-align: center;
margin: auto;
text-transform: uppercase;
border: 2px solid #333;
color: #333;
text-decoration: none;
transition: all 0.5s ease-in-out;
}
.btn-half-swipe:before, .btn-half-swipe:after {
content: "";
position: absolute;
left:0;
top:0;
height: 100%;
width: 140%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.btn-half-swipe span{
position:relative;
transition: all 0.5s ease-in-out;
z-index:4;
}
.btn-half-swipe:after {
left: -70px;
border-left: 50px solid transparent;
transform: translateX(100%);
}
.btn-half-swipe:hover:before {
transform: translateX(-49%);
}
.btn-half-swipe:hover:after {
transform: translateX(49%);
}
.btn-half-swipe--orange:after {
border-top: 80px solid #FEAE00;
}
.btn-half-swipe--orange:hover {
border: 2px solid #FEAE00;
}
.btn-half-swipe--pink:after {
border-top: 80px solid #FF6392;
}
.btn-half-swipe--pink:hover {
border: 2px solid #FF6392;
}
.btn-half-swipe--red:after {
border-top: 80px solid #EF233C;
}
.btn-half-swipe--red:hover {
border: 2px solid #EF233C;
}
.btn-half-swipe--blue:after {
border-top: 80px solid #3A86FF;
}
.btn-half-swipe--blue:hover {
border: 2px solid #3A86FF;
}
.btn-half-swipe--green:after {
border-top: 80px solid #80ED99;
}
.btn-half-swipe--green:hover {
border: 2px solid #80ED99;
}
.btn-half-swipe--gray:after {
border-top: 80px solid #ccc;
}
.btn-half-swipe--gray:hover {
border: 2px solid #ccc;
}
/* Shadow drop */
.btn-shadow-drop {
position:relative;
margin-top:10%;
background:#f9fafa;
padding:20px;
font-size:0.9em;
font-weight:700;
letter-spacing:5px;
text-transform:uppercase;
transition: all 300ms ease-in-out;
left:0;
top:0;
width: 180px;
}
.btn-shadow-drop:hover {
left:4px;
top:4px;
box-shadow:0 0 0 0 white;
}
.btn-shadow-drop--black{
border:1px solid #333;
color:#333;
box-shadow:4px 4px 0px 0px #333;
}
.btn-shadow-drop--orange{
border:1px solid #FEAE00;
color:#FEAE00;
box-shadow:4px 4px 0px 0px #FEAE00;
}
.btn-shadow-drop--red{
border:1px solid #EF233C;
color:#EF233C;
box-shadow:4px 4px 0px 0px #EF233C;
}
.btn-shadow-drop--blue{
border:1px solid #3A86FF;
color:#3A86FF;
box-shadow:4px 4px 0px 0px #3A86FF;
}
.btn-shadow-drop--green{
border:1px solid #80ED99;
color:#80ED99;
box-shadow:4px 4px 0px 0px #80ED99;
}
.btn-shadow-drop--purple{
border:1px solid #3D348B;
color:#3D348B;
box-shadow:4px 4px 0px 0px #3D348B;
}
/* Neumorphic enabled and disabled */
.neumorphic-section {
padding-top: 10px;
background: #eee;
}
.neumorphic{
-webkit-appearance: none;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
outline: none;
cursor: pointer;
width: 200px;
height: 50px;
background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
border-radius: 30px;
border: 1px solid #8F9092;
box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 0 #CECFD1;
transition: all .2s ease;
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
font-weight: 600;
color: #606060;
text-shadow: 0 1px #fff;
}
.neumorphic::-moz-focus-inner{
border: 0
}
.neumorphic > *{
transition: transform .2s ease;
transform: scale(.975)
}
.neumorphic:hover:not([disabled]){
box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}
.neumorphic-enabled:focus:not(:active){
outline: none;
}
.neumorphic-enabled:active:not([disabled]){
box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}
.neumorphic:hover{
color: #606060;
text-shadow: 0 1px #fff;
}
.neumorphic-disabled{
opacity: 0.5;
cursor: not-allowed !important;
}
/* Layered 3d */
.btn-layered-3d, .btn-layered-3d > *, .btn-layered-3d > *::before, .btn-layered-3d > *::after {
box-sizing: border-box;
}
.btn-layered-3d{
width: 180px;
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: 600;
text-transform: uppercase;
padding: 1.15em 2em;
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
.btn-layered-3d::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
.btn-layered-3d:hover {
transform: translate(0, 0.25em);
}
.btn-layered-3d:hover::before {
transform: translate3d(0, 0.5em, -1em);
}
.btn-layered-3d--pink{
color: hsl(342, 70%, 34%);
background: hsl(342, 100%, 95%);
border: 2px solid hsl(342, 70%, 34%);
}
.btn-layered-3d--pink::before {
background: hsl(342, 100%, 85%);
box-shadow: 0 0 0 2px hsl(342, 70%, 34%), 0 0.625em 0 0 hsl(342, 100%, 95%);
}
.btn-layered-3d--orange{
color: hsl(41, 89%, 46%);
background: hsl(41, 100%, 90%);
border: 2px solid hsl(41, 89%, 46%);
}
.btn-layered-3d--orange::before {
background: hsl(41, 100%, 75%);
box-shadow: 0 0 0 2px hsl(41, 89%, 46%), 0 0.625em 0 0 hsl(41, 100%, 90%);
}
.btn-layered-3d--red{
color: hsl(353, 86%, 54%);
background: hsl(353, 86%, 94%);
border: 2px solid hsl(353, 86%, 54%);
}
.btn-layered-3d--red::before {
background: hsl(353, 86%, 74%);
box-shadow: 0 0 0 2px hsl(353, 86%, 54%), 0 0.625em 0 0 hsl(353, 86%, 94%);
}
.btn-layered-3d--blue{
color: hsl(217, 100%, 62%);
background: hsl(217, 100%, 92%);
border: 2px solid hsl(217, 100%, 62%);
}
.btn-layered-3d--blue::before {
background: hsl(217, 100%, 79%);
box-shadow: 0 0 0 2px hsl(217, 100%, 62%), 0 0.625em 0 0 hsl(217, 100%, 92%);
}
.btn-layered-3d--green{
color: hsl(134, 47%, 44%);
background: hsl(134, 47%, 94%);
border: 2px solid hsl(134, 47%, 44%);
}
.btn-layered-3d--green::before {
background: hsl(134, 47%, 74%);
box-shadow: 0 0 0 2px hsl(134, 47%, 44%), 0 0.625em 0 0 hsl(134, 47%, 94%);
}
.btn-layered-3d--purple{
color: hsl(246, 45%, 38%);
background: hsl(246, 45%, 88%);
border: 2px solid hsl(246, 45%, 38%);
}
.btn-layered-3d--purple::before {
background: hsl(246, 45%, 68%);
box-shadow: 0 0 0 2px hsl(246, 45%, 38%), 0 0.625em 0 0 hsl(246, 45%, 88%);
}
/* Button 17 */
.btn-arrow-slide-cont {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
width: 180px;
height: auto;
}
.btn-arrow-slide-cont:hover{
background:transparent;
}
.btn-arrow-slide-circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
border-radius: 1.625rem;
}
.btn-arrow-slide-circle .btn-arrow-slide-icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.btn-arrow-slide-circle .btn-arrow-slide-icon.btn-arrow-slide-arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
.btn-arrow-slide-arrow::before {
position: absolute;
content: '';
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
.btn-arrow-slide-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.btn-arrow-slide-cont:hover .btn-arrow-slide-circle {
width: 100%;
}
.btn-arrow-slide-cont:hover .btn-arrow-slide-circle .btn-arrow-slide-icon.btn-arrow-slide-arrow {
background: #fff;
transform: translate(1rem, 0);
}
.btn-arrow-slide-cont:hover .btn-arrow-slide-text {
color: #fff;
}
.btn-arrow-slide-cont--black .btn-arrow-slide-circle{
background: #333;
}
.btn-arrow-slide-cont--black .btn-arrow-slide-text{
color: #333;
}
.btn-arrow-slide-cont--orange .btn-arrow-slide-circle{
background: #FEC23F;
}
.btn-arrow-slide-cont--orange .btn-arrow-slide-text{
color: #FEC23F;
}
.btn-arrow-slide-cont--red .btn-arrow-slide-circle{
background: #EF233C;
}
.btn-arrow-slide-cont--red .btn-arrow-slide-text{
color: #EF233C;
}
.btn-arrow-slide-cont--green .btn-arrow-slide-circle{
background: rgb(83, 187, 107);
}
.btn-arrow-slide-cont--green .btn-arrow-slide-text{
color: rgb(83, 187, 107);
}
.btn-arrow-slide-cont--blue .btn-arrow-slide-circle{
background: #3A86FF;
}
.btn-arrow-slide-cont--blue .btn-arrow-slide-text{
color: #3A86FF;
}
.btn-arrow-slide-cont--purple .btn-arrow-slide-circle{
background: #3D348B;
}
.btn-arrow-slide-cont--purple .btn-arrow-slide-text{
color: #3D348B;
}
/* Stripe bottom */
@keyframes stripe-slide {
0% {
background-position: 0% 0;
}
100% {
background-position: 100% 0;
}
}
.btn-bottom-stripe {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
line-height: normal;
cursor: pointer;
-moz-user-select: text;
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 16px 56px 22px;
background-color: #fff;
border-radius: 6px;
margin-bottom: 16px;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
}
.btn-bottom-stripe:-moz-focus-inner {
padding: 0;
border: 0;
}
.btn-bottom-stripe:after {
content: '';
display: block;
height: 7px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0;
bottom: 0;
background-size: 7px 7px;
}
.btn-bottom-stripe:hover {
color: #fff;
}
.btn-bottom-stripe:hover:after {
background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
animation: stripe-slide 12s infinite linear forwards;
}
.btn-bottom-stripe--black {
color: #333;
border: 2px solid #333;
}
.btn-bottom-stripe--black:after {
border-top: 2px solid #333;
background-image: repeating-linear-gradient(45deg, #333, #333 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--black:hover {
background-color: #333;
}
.btn-bottom-stripe--orange {
color: #FEC23F;
border: 2px solid #FEC23F;
}
.btn-bottom-stripe--orange:after {
border-top: 2px solid #FEC23F;
background-image: repeating-linear-gradient(45deg, #FEC23F, #FEC23F 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--orange:hover {
background-color: #FEC23F;
}
.btn-bottom-stripe--red {
color: #EF233C;
border: 2px solid #EF233C;
}
.btn-bottom-stripe--red:after {
border-top: 2px solid #EF233C;
background-image: repeating-linear-gradient(45deg, #EF233C, #EF233C 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--red:hover {
background-color: #EF233C;
}
.btn-bottom-stripe--green {
color: #53BB6B;
border: 2px solid #53BB6B;
}
.btn-bottom-stripe--green:after {
border-top: 2px solid #53BB6B;
background-image: repeating-linear-gradient(45deg, #53BB6B, #53BB6B 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--green:hover {
background-color: #53BB6B;
}
.btn-bottom-stripe--blue {
color: #3A86FF;
border: 2px solid #3A86FF;
}
.btn-bottom-stripe--blue:after {
border-top: 2px solid #3A86FF;
background-image: repeating-linear-gradient(45deg, #3A86FF, #3A86FF 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--blue:hover {
background-color: #3A86FF;
}
.btn-bottom-stripe--purple {
color: #3D348B;
border: 2px solid #3D348B;
}
.btn-bottom-stripe--purple:after {
border-top: 2px solid #3D348B;
background-image: repeating-linear-gradient(45deg, #3D348B, #3D348B 1px, transparent 2px, transparent 5px);
}
.btn-bottom-stripe--purple:hover {
background-color: #3D348B;
}
/* Draw border */
.btn-draw-border {
box-shadow: inset 0 0 0 4px #555;
color: #555;
transition: color 0.25s 0.0833333333s;
position: absolute;
background: none;
border: none;
cursor: pointer;
width: 180px;
padding: 1.5em;
letter-spacing: 0.05rem;
font-weight: bold;
}
.btn-draw-border::before, .btn-draw-border::after {
border: 0 solid transparent;
box-sizing: border-box;
content: '';
pointer-events: none;
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
}
.btn-draw-border::before {
border-bottom-width: 4px;
border-left-width: 4px;
}
.btn-draw-border::after {
border-top-width: 4px;
border-right-width: 4px;
}
.btn-draw-border:hover {
background:transparent;
}
.btn-draw-border:hover::before, .btn-draw-border:hover::after {
transition: border-color 0s, width 0.35s, height 0.15s;
width: 100%;
height: 100%;
}
.btn-draw-border:hover::before {
transition-delay: 0s, 0.15s, 0.35s;
}
.btn-draw-border::after {
transition-delay: 0.15s, 0.25s, 0s;
}
.btn-draw-border--orange:hover {
color: #FDB000;
}
.btn-draw-border--orange:hover::before, .btn-draw-border--orange:hover::after {
border-color: #FDB000;
}
.btn-draw-border--red:hover {
color: #EF233C;
}
.btn-draw-border--red:hover::before, .btn-draw-border--red:hover::after {
border-color: #EF233C;
}
.btn-draw-border--blue:hover {
color: #3A86FF;
}
.btn-draw-border--blue:hover::before, .btn-draw-border--blue:hover::after {
border-color: #3A86FF;
}
.btn-draw-border--green:hover {
color: #80ED99;
}
.btn-draw-border--green:hover::before, .btn-draw-border--green:hover::after {
border-color: #80ED99;
}
.btn-draw-border--purple:hover {
color: #3D348B;
}
.btn-draw-border--purple:hover::before, .btn-draw-border--purple:hover::after {
border-color: #3D348B;
}
.btn-draw-border--pink:hover {
color: #FF6392;
}
.btn-draw-border--pink:hover::before, .btn-draw-border--pink:hover::after {
border-color: #FF6392;
}
/* Striped shadow 3d */
.btn-striped-shadow {
overflow: visible;
border: 0;
padding: 0;
display: inline-block;
letter-spacing: 1px;
position: relative;
transition: opacity .3s, z-index .3s step-end, -webkit-transform .3s;
transition: opacity .3s, z-index .3s step-end, transform .3s;
transition: opacity .3s, z-index .3s step-end, transform .3s, -webkit-transform .3s;
z-index: 1;
background-color: #fafafa;
cursor: pointer;
width: 180px;
height: 48px;
line-height: 38px;
}
.btn-striped-shadow span {
display: block;
position: relative;
z-index: 2;
border: 5px solid;
background: #fafafa;
}
.btn-striped-shadow:after, .btn-striped-shadow:before {
content: '';
display: block;
position: absolute;
z-index: 1;
transition: max-height .3s, width .3s, -webkit-transform .3s;
transition: transform .3s, max-height .3s, width .3s;
transition: transform .3s, max-height .3s, width .3s, -webkit-transform .3s;
}
.btn-striped-shadow:after {
width: calc(100% - 4px);
height: 8px;
left: -10px;
bottom: -9px;
background-size: 15px 8px;
background-repeat: repeat-x;
}
.btn-striped-shadow:before {
width: 8px;
max-height: calc(100% - 5px);
height: 100%;
left: -12px;
bottom: -5px;
background-size: 8px 15px;
background-repeat: repeat-y;
background-position: 0 100%;
}
.btn-striped-shadow:hover {
-webkit-transform: translate(-12px, 12px);
-ms-transform: translate(-12px, 12px);
transform: translate(-12px, 12px);
z-index: 3;
}
.btn-striped-shadow:hover:before {
max-height: calc(100% - 10px);
}
.btn-striped-shadow:hover:after, .btn-striped-shadow:hover:before {
-webkit-transform: translate(12px, -12px);
-ms-transform: translate(12px, -12px);
transform: translate(12px, -12px);
}
.btn-striped-shadow--black:after, .btn-striped-shadow--black:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #333 5px, #333 10px, transparent 10px );
}
.btn-striped-shadow--black span {
border-color: #333;
color: #333;
}
.btn-striped-shadow--orange:after, .btn-striped-shadow--orange:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #FEC54B 5px, #FEC54B 10px, transparent 10px );
}
.btn-striped-shadow--orange span {
border-color: #FEC54B;
color: #FEC54B;
}
.btn-striped-shadow--red:after, .btn-striped-shadow--red:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #F03048 5px, #F03048 10px, transparent 10px );
}
.btn-striped-shadow--red span {
border-color: #F03048;
color: #F03048;
}
.btn-striped-shadow--blue:after, .btn-striped-shadow--blue:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #3A86FF 5px, #3A86FF 10px, transparent 10px );
}
.btn-striped-shadow--blue span {
border-color: #3A86FF;
color: #3A86FF;
}
.btn-striped-shadow--green:after, .btn-striped-shadow--green:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #53BB6B 5px, #53BB6B 10px, transparent 10px );
}
.btn-striped-shadow--green span {
border-color: #53BB6B;
color: #53BB6B;
}
.btn-striped-shadow--purple:after, .btn-striped-shadow--purple:before {
background-image: linear-gradient( 135deg, transparent 0, transparent 5px, #3D348B 5px, #3D348B 10px, transparent 10px );
}
.btn-striped-shadow--purple span {
border-color: #3D348B;
color: #3D348B;
}
/* Flip button */
.btn-flip-side-cont {
width: 180px;
height: 60px;
cursor: pointer;
perspective: 500px;
-webkit-perspective: 500px;
margin-left:5%;
}
.btn-flip-side {
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.25s;
-webkit-transition: 0.25s;
}
.btn-flip-side-cont:hover .btn-flip-side {
transform: rotateX(-90deg);
}
.btn-flip-side > span {
width: 200px;
height: 100%;
position: absolute;
box-sizing: border-box;
line-height: 50px;
text-align: center;
}
.btn-flip-side > span:nth-child(1) {
transform: translate3d(0, 0, 30px);
-webkit-transform: translate3d(0, 0, 30px);
}
.btn-flip-side > span:nth-child(2) {
color: #fff;
transform: rotateX(90deg) translate3d(0, 0, 30px);
-webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}
.btn-flip-side--black > span {
border: 5px solid #333;
}
.btn-flip-side--black > span:nth-child(1) {
color: #333;
}
.btn-flip-side--black > span:nth-child(2) {
background: #333;
}
.btn-flip-side--orange > span {
border: 5px solid #FEC54B;
}
.btn-flip-side--orange > span:nth-child(1) {
color: #FEC54B;
}
.btn-flip-side--orange > span:nth-child(2) {
background: #FEC54B;
}
.btn-flip-side--red > span {
border: 5px solid #F03048;
}
.btn-flip-side--red > span:nth-child(1) {
color: #F03048;
}
.btn-flip-side--red > span:nth-child(2) {
background: #F03048;
}
.btn-flip-side--blue > span {
border: 5px solid #3A86FF;
}
.btn-flip-side--blue > span:nth-child(1) {
color: #3A86FF;
}
.btn-flip-side--blue > span:nth-child(2) {
background: #3A86FF;
}
.btn-flip-side--purple > span {
border: 5px solid #3D348B;
}
.btn-flip-side--purple > span:nth-child(1) {
color: #3D348B;
}
.btn-flip-side--purple > span:nth-child(2) {
background: #3D348B;
}
.btn-flip-side--green > span {
border: 5px solid #53BB6B;
}
.btn-flip-side--green > span:nth-child(1) {
color: #53BB6B;
}
.btn-flip-side--green > span:nth-child(2) {
background: #53BB6B;
}
/* Flashy background slide */
.btn-background-slide {
width: 180px;
padding: 6px;
height: 50px;
color: #333;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: #333 2px solid;
overflow: hidden;
-webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
-moz-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
cursor: pointer;
box-shadow: 0px 0px 0px #333;
}
.btn-background-slide:hover {
box-shadow: 8px 8px 0px #333, -8px -8px 0px #333;
}
.btn-background-slide:hover .btn-background-slide-bg {
opacity: 1;
transform: translate3d(0px, 0px, 0px);
}
.btn-background-slide-bg {
width: 100%;
height: 100%;
position: absolute;
background: transparent;
top: 0;
left: 0;
transform: translate3d(0px, 90px, 0px);
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-moz-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
z-index: -1;
}
.btn-background-slide--orange{
background-color: #FEC54B;
}
.btn-background-slide--red{
background-color: #F03048;
}
.btn-background-slide--pink{
background-color: #F13C51;
}
.btn-background-slide--blue{
background-color: #3A86FF;
}
.btn-background-slide--green{
background-color: #53BB6B;
}
.btn-background-slide--purple{
background-color: rgb(134, 126, 206);
}
/* Shadow */
.btn-shadow {
display: inline-block;
margin: 5px;
font-weight: 500;
line-height: 24px;
color: #fff;
position: relative;
text-align: center;
background: none;
outline: none;
border: none;
}
.btn-shadow:before {
content: '';
display: inline-block;
height: 40px;
position: absolute;
bottom: -1px;
left: 10px;
right: 10px;
z-index: 0;
border-radius: 2em;
filter: blur(14px) brightness(0.9);
transform-style: preserve-3d;
transition: all 0.3s ease-out;
}
.btn-shadow span {
display: inline-block;
padding: 16px 60px;
border-radius: 50em;
position: relative;
z-index: 2;
will-change: transform, filter;
transform-style: preserve-3d;
transition: all 0.3s ease-out;
}
.btn-shadow:hover {
color: #fff;
}
.btn-shadow:hover span {
filter: brightness(0.9) contrast(1.2);
transform: scale(0.96);
}
.btn-shadow:hover:before {
bottom: 8px;
filter: blur(6px) brightness(0.8);
left: 15px;
right: 15px;
}
.btn-shadow--orange span, .btn-shadow--orange:before {
background: #FEC54B;
}
.btn-shadow--black span, .btn-shadow--black:before {
background: #333;
}
.btn-shadow--red span, .btn-shadow--red:before {
background: #F03048;
}
.btn-shadow--blue span, .btn-shadow--blue:before {
background: #3A86FF;
}
.btn-shadow--green span, .btn-shadow--green:before {
background: #53BB6B;
}
.btn-shadow--purple span, .btn-shadow--purple:before {
background: #3D348B;
}
/* Pushable */
.btn-pushable {
padding: 15px;
margin-right: 5px;
height: 50px;
width: 180px;
border: none;
outline: none;
color: white;
font-family: inherit;
border-radius: 3px;
}
.btn-pushable:hover {
transition: all 0.1s ease-in;
}
.btn-pushable:active {
transform: translateY(4px);
border-bottom-width: 2px;
box-shadow: none;
}
.btn-pushable--black{
background: #333;
box-shadow: 0 6px 0px #333;
border-bottom: 3px solid #222;
}
.btn-pushable--black:hover {
background: #222;
box-shadow: 0 4px 1px #222;
border-bottom: 3px solid #111;
}
.btn-pushable--orange{
background: hsl(41, 99%, 65%);
box-shadow: 0 6px 0px hsl(41, 99%, 65%);
border-bottom: 3px solid hsl(41, 95%, 60%);
}
.btn-pushable--orange:hover {
background: hsl(41, 95%, 60%);
box-shadow: 0 4px 1px hsl(41, 95%, 60%);
border-bottom: 3px solid hsl(41, 95%, 55%);
}
.btn-pushable--red{
background: hsl(353, 87%, 56%);
box-shadow: 0 6px 0px hsl(353, 87%, 56%);
border-bottom: 3px solid hsl(353, 85%, 49%);
}
.btn-pushable--red:hover {
background: hsl(353, 85%, 49%);
box-shadow: 0 4px 1px hsl(353, 85%, 49%);
border-bottom: 3px solid hsl(353, 82%, 44%);
}
.btn-pushable--blue{
background: hsl(217, 100%, 62%);
box-shadow: 0 6px 0px hsl(217, 100%, 62%);
border-bottom: 3px solid hsl(217, 97%, 57%);
}
.btn-pushable--blue:hover {
background: hsl(217, 97%, 57%);
box-shadow: 0 4px 1px hsl(217, 97%, 57%);
border-bottom: 3px solid hsl(217, 95%, 52%);
}
.btn-pushable--green{
background: hsl(134, 43%, 53%);
box-shadow: 0 6px 0px hsl(134, 43%, 53%);
border-bottom: 3px solid hsl(134, 40%, 48%);
}
.btn-pushable--green:hover {
background: hsl(134, 40%, 48%);
box-shadow: 0 4px 1px hsl(134, 40%, 48%);
border-bottom: 3px solid hsl(134, 37%, 42%);
}
.btn-pushable--purple{
background: hsl(246, 45%, 38%);
box-shadow: 0 6px 0px hsl(246, 45%, 38%);
border-bottom: 3px solid hsl(246, 43%, 32%);
}
.btn-pushable--purple:hover {
background: hsl(246, 43%, 32%);
box-shadow: 0 4px 1px hsl(246, 43%, 32%);
border-bottom: 3px solid hsl(246, 40%, 28%);
}
/* Fill bottom right */
.btn-fill-bottom {
border: none;
outline: none;
background: none;
text-align:center;
display: inline-block;
width: 180px;
height: 40px;
margin: 20px;
position: relative;
overflow: hidden;
transition: color .5s;
}
.btn-fill-bottom:before {
content: "";
position: absolute;
z-index: -1;
height: 200px;
width: 250px;
border-radius: 50%;
top: 100%;
left: 100%;
transition: all .7s;
}
.btn-fill-bottom:hover {
color: #fff;
}
.btn-fill-bottom:hover:before {
top: -40px;
left: -40px;
}
.btn-fill-bottom--black {
color: #333;
border: 2px solid #333;
}
.btn-fill-bottom--black:before {
background: #333;
}
.btn-fill-bottom--orange {
color: #FEC64D;
border: 2px solid #FEC64D;
}
.btn-fill-bottom--orange:before {
background: #FEC64D;
}
.btn-fill-bottom--red {
color: #F02D44;
border: 2px solid #F02D44;
}
.btn-fill-bottom--red:before {
background: #F02D44;
}
.btn-fill-bottom--blue {
color: #3D87FF;
border: 2px solid #3D87FF;
}
.btn-fill-bottom--blue:before {
background: #3D87FF;
}
.btn-fill-bottom--green {
color: #54BB6C;
border: 2px solid #54BB6C;
}
.btn-fill-bottom--green:before {
background: #54BB6C;
}
.btn-fill-bottom--purple {
color: #3E358D;
border: 2px solid #3E358D;
}
.btn-fill-bottom--purple:before {
background: #3E358D;
}
/* Fill down */
.btn-down {
border: none;
outline: none;
background: none;
text-align:center;
display: inline-block;
width: 180px;
height: 40px;
margin: 20px;
position: relative;
overflow: hidden;
transition: color .5s;
}
.btn-down:before {
content: "";
position: absolute;
z-index: -1;
height: 200px;
width: 250px;
border-radius: 50%;
bottom: 100%;
left: -30px;
transition: all .7s;
}
.btn-down:hover {
color: #fff;
}
.btn-down:hover:before {
bottom: -50px;
}
.btn-down--black {
color: #333;
border: 2px solid #333;
}
.btn-down--black:before {
background: #333;
}
.btn-down--orange {
color: #FEC64D;
border: 2px solid #FEC64D;
}
.btn-down--orange:before {
background: #FEC64D;
}
.btn-down--red {
color: #F02D44;
border: 2px solid #F02D44;
}
.btn-down--red:before {
background: #F02D44;
}
.btn-down--blue {
color: #3D87FF;
border: 2px solid #3D87FF;
}
.btn-down--blue:before {
background: #3D87FF;
}
.btn-down--green {
color: #54BB6C;
border: 2px solid #54BB6C;
}
.btn-down--green:before {
background: #54BB6C;
}
.btn-down--purple {
color: #3E358D;
border: 2px solid #3E358D;
}
.btn-down--purple:before {
background: #3E358D;
}
/* Flash slide */
.flash-slide {
border: none;
display: inline-block;
color: #fff;
margin: 20px;
width: 180px;
height: 50px;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font-family: Helvetica;
text-align:center;
}
.flash-slide:before {
content: "";
position: absolute;
top: -30px;
left: -80px;
height: 100px;
width: 70px;
background: rgba(255, 255, 255, .3);
transform: rotate(20deg);
}
.flash-slide:hover:before {
left: 190px;
transition: all .5s;
}
.flash-slide--black{
background: #333;
}
.flash-slide--orange{
background: #FEC64D;
}
.flash-slide--red{
background: #F02D44;
}
.flash-slide--blue{
background: #3D87FF;
}
.flash-slide--green{
background: #54BB6C;
}
.flash-slide--purple{
background: #3E358D;
}
/* Zoom out */
.zoom-out{
display: inline-block;
color: #fff;
margin: 20px;
width: 180px;
height: 50px;
border-radius: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font-family: Helvetica;
text-align:center;
transition: all .5s;
border: none;
}
.zoom-out:hover{
transform:scale(1.1);
}
.zoom-out--black{
background: #333;
}
.zoom-out--orange{
background: #FEC64D;
}
.zoom-out--red{
background: #F02D44;
}
.zoom-out--blue{
background: #3D87FF;
}
.zoom-out--green{
background: #54BB6C;
}
.zoom-out--purple{
background: #3E358D;
}
/* Button 35 */
.fill-center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-decoration: none;
cursor: pointer;
border-radius: 8px;
height: 50px;
width: 180px;
padding: 0;
outline: none;
overflow: hidden;
transition: color 0.3s 0.1s ease-out;
text-align: center;
background: transparent;
}
.fill-center::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: '';
border-radius: 50%;
display: block;
width: 20em;
height: 20em;
line-height: 20em;
left: -3em;
text-align: center;
transition: box-shadow 0.5s ease-out;
z-index: -1;
}
.fill-center:hover {
color: #fff;
background:transparent;
}
.fill-center--black{
border: 1px solid #333;
color: #333;
}
.fill-center--black:hover::before {
box-shadow: inset 0 0 0 11em #333;
}
.fill-center--orange{
border: 1px solid #FEC64D;
color: #FEC64D;
}
.fill-center--orange:hover::before {
box-shadow: inset 0 0 0 11em #FEC64D;
}
.fill-center--red{
border: 1px solid #F02D44;
color: #F02D44;
}
.fill-center--red:hover::before {
box-shadow: inset 0 0 0 11em #F02D44;
}
.fill-center--blue{
border: 1px solid #3D87FF;
color:#3D87FF;
}
.fill-center--blue:hover::before {
box-shadow: inset 0 0 0 11em #3D87FF;
}
.fill-center--green{
border: 1px solid #54BB6C;
color: #54BB6C;
}
.fill-center--green:hover::before {
box-shadow: inset 0 0 0 11em #54BB6C;
}
.fill-center--purple{
border: 1px solid #3E358D;
color: #3E358D;
}
.fill-center--purple:hover::before {
box-shadow: inset 0 0 0 11em #3E358D;
}
/* Sign post */
.sign-post {
display: inline-block;
position: relative;
color: #888;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
text-decoration: none;
text-align: center;
padding: 8px 12px;
width:180px;
font-size: 15px;
font-weight: 700;
font-family: helvetica, arial, sans-serif;
border-radius: 4px;
border: 1px solid #bcbcbc;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);
}
.sign-post:hover {
color: #555;
}
.sign-post-back {
border-left: none;
}
.sign-post-back:after {
content: '';
position: absolute;
height: 50%;
width: 15px;
border-left: 1px solid #bcbcbc;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
left: -5px;
top: 1px;
-webkit-transform: skew(-35deg, 0);
-moz-transform: skew(-35deg, 0);
-o-transform: skew(-35deg, 0);
-ms-transform: skew(-35deg, 0);
transform: skew(-35deg, 0);
}
.sign-post-back:before {
content: '';
position: absolute;
height: 48%;
width: 15px;
border-left: 1px solid #bcbcbc;
bottom: 1px;
left: -5px;
-webkit-transform: skew(35deg, 0);
-moz-transform: skew(35deg, 0);
-o-transform: skew(35deg, 0);
-ms-transform: skew(35deg, 0);
transform: skew(35deg, 0);
background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
-webkit-box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
box-shadow: -2px 1px 2px rgba(100,100,100,0.1);
}
.sign-post-forward {
border-right: none;
}
.sign-post-forward:after {
content: '';
position: absolute;
height: 48%;
width: 15px;
border-right: 1px solid #bcbcbc;
background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);
right: -5px;
bottom: 1px;
-webkit-transform: skew(-35deg, 0);
-moz-transform: skew(-35deg, 0);
-o-transform: skew(-35deg, 0);
-ms-transform: skew(-35deg, 0);
transform: skew(-35deg, 0);
-webkit-box-shadow: 2px 1px 2px rgba(100,100,100,0.1);
box-shadow: 2px 1px 2px rgba(100,100,100,0.1);
}
.sign-post-forward:before {
content: '';
position: absolute;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);
height: 50%;
width: 15px;
border-right: 1px solid #bcbcbc;
top: 1px;
right: -5px;
-webkit-transform: skew(35deg, 0);
-moz-transform: skew(35deg, 0);
-o-transform: skew(35deg, 0);
-ms-transform: skew(35deg, 0);
transform: skew(35deg, 0);
}
/* 3d top */
.btn-top-3d {
display: inline-block;
position: relative;
text-align: center;
padding: 20px;
width: 180px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: 0.1s background, 0.1s transform;
border: none;
}
.btn-top-3d:hover {
transform: translate3d(0, 8px, 0);
}
.btn-top-3d:after, .btn-top-3d:before {
content: '';
position: absolute;
top: 100%;
width: 50%;
height: 8px;
transition: 0.1s height, 0.1s background;
}
.btn-top-3d:after {
right: 0;
transform: skewX(-45deg);
transform-origin: 0 0;
}
.btn-top-3d:before {
left: 0;
transform: skewX(45deg);
transform-origin: 100% 0;
}
.btn-top-3d:hover:after, .btn-top-3d:hover:before {
height: 0;
}
.btn-top-3d--black{
background: #333;
}
.btn-top-3d--black:after, .btn-top-3d--black:before {
background: #222;
}
.btn-top-3d--black:hover {
background: #222;
}
.btn-top-3d--orange{
background: #FEC64D;
}
.btn-top-3d--orange:after, .btn-top-3d--orange:before {
background: #FABD38;
}
.btn-top-3d--orange:hover {
background: #FABD38;
}
.btn-top-3d--red{
background: #F02D44;
}
.btn-top-3d--red:after, .btn-top-3d--red:before {
background: #E7132C;
}
.btn-top-3d--red:hover {
background: #E7132C;
}
.btn-top-3d--green{
background: #54BB6C;
}
.btn-top-3d--green:after, .btn-top-3d--green:before {
background: #49AB60;
}
.btn-top-3d--green:hover {
background: #49AB60;
}
.btn-top-3d--blue{
background: #3D87FF;
}
.btn-top-3d--blue:after, .btn-top-3d--blue:before {
background: rgb(35, 109, 230);
}
.btn-top-3d--blue:hover {
background: rgb(35, 109, 230);
}
.btn-top-3d--purple{
background:#3E358D;
}
.btn-top-3d--purple:after, .btn-top-3d--purple:before {
background: #362F75;
}
.btn-top-3d--purple:hover {
background: #362F75;
}
/* Border flip */
.border-flip {
display: inline-block;
padding: 15px;
width: 180px;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
background: none;
border: none;
}
.border-flip:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: perspective(350px) rotateX(0deg);
}
.border-flip:hover:before {
transition: 0.35s ease all;
transform: perspective(350px) rotateX(-180deg);
}
.border-flip:before {
transition: 0.35s ease all;
}
.border-flip--black {
color: #333;
}
.border-flip--black:before {
border: solid 3px #333;
}
.border-flip--orange {
color: #FEC64D;
}
.border-flip--orange:before {
border: solid 3px #FEC64D;
}
.border-flip--red {
color:#F02D44;
}
.border-flip--red:before {
border: solid 3px #F02D44;
}
.border-flip--blue {
color: #3D87FF;
}
.border-flip--blue:before {
border: solid 3px #3D87FF;
}
.border-flip--green {
color: #54BB6C;
}
.border-flip--green:before {
border: solid 3px #54BB6C;
}
.border-flip--purple {
color: #3E358D;
}
.border-flip--purple:before {
border: solid 3px #3E358D;
}
.class-helper {
background: #eee;
padding: 20px;
position: relative;
box-shadow: 1px 1px 5px #333;
}
.close-icon {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
padding: 10px 20px;
background: #ccc;
position: absolute;
top: 0;
right: 0;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: rgb(46, 48, 39);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.code-area {
width: 96%;
position: fixed;
background: #eee;
padding: 50px 20px;
bottom: 0;
height: 50vh;
transform: translateY(110%);
transition: 0.5s;
margin: auto;
box-shadow: 1px 1px 6px rgba(0,0,0,0.4)
}
.close-icon {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
padding: 10px 20px;
background: #ccc;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.code-container pre {
height: 80px;
width: 96%;
overflow: scroll;
background: #F5F2F0 !important;
padding: 20px;
border: 1px solid #ccc;
font-family: monospace;
}
.css-code-container pre {
height: 150px;
}
.code-container pre code {
color: rgb(58, 70, 82);
text-shadow: 0 1px white;
font-family: monospace;
font-size: 1.2em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
tab-size: 4;
-moz-hyphens: none;
hyphens: none;
}
.code-header {
display: flex;
max-width: 200px;
justify-content: space-between;
align-items: center;
margin-top: 30px;
}
.code-header h4 {
margin: 3px 0;
}External Link for A Collection of Button Hover Over Effects
Related Tags
Add Comment
Other Items in buttons
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript
Random Quote
