Author: | enjeck |
---|---|
Views Total: | 1,282 views |
Official Page: | Go to website |
Last Update: | October 11, 2021 |
License: | MIT |
Preview:

Description:
btns.css is a CSS library that provides a collection of cool hover effects for web buttons.
See it in action:
See Also:
- SCSS Mixin Library For Cool Link Hover Effects
- 60+ Image Hover Effect With Pure CSS – imagehover.css
- Creating Hover Effects with CSS3 Animations – hover.css
How to use it:
1. Copy the styles of the button hover effects in the src/styles.css
.
.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; }
2. Paste the styles into your document and apply the corresponding CSS classes to your buttons.
<button class="btn btn-slide-bottom btn-slide-bottom--orange"> <span>Click me</span> </button> <button class="btn btn-slide-bottom btn-slide-bottom--pink"> <span>Click me</span> </button> <button class="btn btn-slide-bottom btn-slide-bottom--blue"> <span>Click me</span> </button> <button class="btn btn-slide-bottom btn-slide-bottom--red"> <span>Click me</span> </button> <button class="btn btn-slide-bottom btn-slide-bottom--green"> <span>Click me</span> </button> <button class="btn btn-slide-bottom btn-slide-bottom--yellow"> <span>Click me</span> </button>
Slide from bottom right:
- .btn-slide-bottom
- .btn-slide-bottom–orange
- .btn-slide-bottom–pink
- .btn-slide-bottom–blue
- .btn-slide-bottom–red
- .btn-slide-bottom–green
- .btn-slide-bottom–yellow
Subtle moving gradient with shadow:
- .btn-moving-gradient
- .btn-moving-gradient–orange
- .btn-moving-gradient–blue
- .btn-moving-gradient–red
- .btn-moving-gradient–green
- .btn-moving-gradient–purple
Rectangular to rounded:
- .btn-rect-to-round
- .btn-rect-to-round–black
- .btn-rect-to-round–pink
- .btn-rect-to-round–blue
- .btn-rect-to-round–red
- .btn-rect-to-round–green
- .btn-rect-to-round–orange
Slide and show more text:
- .btn-slide-show
- .btn-slide-show-inner–orange
- .btn-slide-show-inner–pink
- .btn-slide-show-inner–blue
- .btn-slide-show-inner–red
- .btn-slide-show-inner–green
- .btn-slide-show-inner–gray
Fill center:
- .btn-fill-center
- .btn-fill-center-text–gray
- .btn-fill-center-text–orange
- .btn-fill-center-text–blue
- .btn-fill-center-text–purple
- .btn-fill-center-text–red
- .btn-fill-center-text–green
Border to line:
- .btn-border-to-line
- .btn-border-to-line-text–gray
- .btn-border-to-line-text–orange
- .btn-border-to-line-text–blue
- .btn-border-to-line-text–red
- .btn-border-to-line-text–green
- .btn-border-to-line-text–purple
Text stretch:
- .btn-text-stretch
- .btn-text-stretch–gray
- .btn-text-stretch–red
- .btn-text-stretch–orange
- .btn-text-stretch–blue
- .btn-text-stretch–green
- .btn-text-stretch–pink
Shine effect:
- .btn-shine-effect
- .btn-shine-effect–gray
- .btn-shine-effect–orange
- .btn-shine-effect–red
- .btn-shine-effect–blue
- .btn-shine-effect–green
- .btn-shine-effect–purple
Swipe right:
- .btn-swipe-left
- .btn-swipe-left–black
- .btn-swipe-left–orange
- .btn-swipe-left–red
- .btn-swipe-left–blue
- .btn-swipe-left–green
- .btn-swipe-left–purple
Double swipe:
- .btn-double-swipe
- .btn-double-swipe–black
- .btn-double-swipe–orange
- .btn-double-swipe–red
- .btn-double-swipe–blue
- .btn-double-swipe–green
- .btn-double-swipe–purple
Diagonal half swipe:
- .btn-half-swipe
- .btn-half-swipe–orange
- .btn-half-swipe–pink
- .btn-half-swipe–red
- .btn-half-swipe–blue
- .btn-half-swipe–green
- .btn-half-swipe–gray
Shadow drop:
- .btn-shadow-drop
- .btn-shadow-drop–black
- .btn-shadow-drop–orange
- .btn-shadow-drop–red
- .btn-shadow-drop–blue
- .btn-shadow-drop–green
- .btn-shadow-drop–purple
Neumorphic Style:
- .neumorphic
- .neumorphic-enabled
- .neumorphic-disabled
Layered 3d:
- .btn-layered-3d
- .btn-layered-3d–pink
- .btn-layered-3d–orange
- .btn-layered-3d–red
- .btn-layered-3d–blue
- .btn-layered-3d–green
- .btn-layered-3d–purple
Stripe bottom:
- .btn-bottom-stripe
- .btn-bottom-stripe–black
- .btn-bottom-stripe–orange
- .btn-bottom-stripe–red
- .btn-bottom-stripe–green
- .btn-bottom-stripe–blue
- .btn-bottom-stripe–purple
Draw border:
- .btn-draw-border
- .btn-draw-border–orange
- .btn-draw-border–red
- .btn-draw-border–blue
- .btn-draw-border–green
- .btn-draw-border–purple
- .btn-draw-border–pink
Striped shadow 3d:
- .btn-striped-shadow
- .btn-striped-shadow–black
- .btn-striped-shadow–orange
- .btn-striped-shadow–red
- .btn-striped-shadow–blue
- .btn-striped-shadow–green
- .btn-striped-shadow–purple
Flip button:
- .btn-flip-side
- .btn-flip-side–black
- .btn-flip-side–orange
- .btn-flip-side–red
- .btn-flip-side–blue
- .btn-flip-side–purple
- .btn-flip-side–green
Flashy background slide:
- .btn-background-slide
- .btn-background-slide–orange
- .btn-background-slide–red
- .btn-background-slide–pink
- .btn-background-slide–blue
- .btn-background-slide–green
- .btn-background-slide–purple
Shadow:
- .btn-shadow
- .btn-shadow–orange
- .btn-shadow–black
- .btn-shadow–red
- .btn-shadow–blue
- .btn-shadow–green
- .btn-shadow–purple
Pushable:
- .btn-pushable
- .btn-pushable–black
- .btn-pushable–orange
- .btn-pushable–red
- .btn-pushable–blue
- .btn-pushable–green
- .btn-pushable–purple
Fill bottom right:
- .btn-fill-bottom
- .btn-fill-bottom–black
- .btn-fill-bottom–orange
- .btn-fill-bottom–red
- .btn-fill-bottom–blue
- .btn-fill-bottom–green
- .btn-fill-bottom–purple
Fill down:
- .btn-down
- .btn-down–black
- .btn-down–orange
- .btn-down–red
- .btn-down–blue
- .btn-down–green
- .btn-down–purple
Flash slide:
- .flash-slide
- .flash-slide–black
- .flash-slide–orange
- .flash-slide–red
- .flash-slide–blue
- .flash-slide–green
- .flash-slide–purple
Zoom out:
- .zoom-out
- .zoom-out–black
- .zoom-out–orange
- .zoom-out–red
- .zoom-out–blue
- .zoom-out–green
- .zoom-out–purple
3d top:
- .btn-top-3d
- .btn-top-3d–black
- .btn-top-3d–orange
- .btn-top-3d–red
- .btn-top-3d–green
- .btn-top-3d–blue
- .btn-top-3d–purple
Border flip:
- .border-flip
- .border-flip–black
- .border-flip–orange
- .border-flip–red
- .border-flip–blue
- .border-flip–green
- .border-flip–purple