A Collection Of Cool Button Hover Effects – btns.css

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