A Collection Of Cool Button Hover Effects – btns.css

Category: Animation , CSS & CSS3 , Recommended | October 11, 2021
Author:enjeck
Views Total:1,282 views
Official Page:Go to website
Last Update:October 11, 2021
License:MIT

Preview:

A Collection Of Cool Button Hover Effects –  btns.css

Description:

btns.css is a CSS library that provides a collection of cool hover effects for web buttons.

See it in action:

See Also:

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

You Might Be Interested In:


Leave a Reply