CODEWITHSUNDEEP
cssanimationbuttonhover
WhoCares
WhoCares

Reputation: 13

How can I fill this button from bottom to top using CSS only?

I would like to fill this button from its bottom to its top using CSS Animation with the already existing purple bottom color. How should I do? I'd like the animation to be as smooth as possible.

Here is my code:

.button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  min-width: 180px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 18px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #78428c), to(#89d2ff));
  background: linear-gradient(0deg, #78428c 20%, #89d2ff);
  -webkit-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
  -webkit-transition: all .6s;
  transition: all .6s;
  color: #fff
}

.button:hover {
  background: #78428c;
  text-decoration: none
}

.button-super {
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 35px
}
<a href="myURL" target="_self" rel="follow" class="button button-super">CLICK HERE</a>

Upvotes: 1

Views: 624

Answers (1)

Skin_phil
Skin_phil

Reputation: 714

Just play with the heigth of your button's background and transition on the position.

.button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  min-width: 180px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 18px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #78428c), to(#89d2ff));
  background: linear-gradient(0deg, #78428c 20%, #89d2ff);
 background-size:1px 50px;  
 background-position:0 50px; 
  -webkit-transition: background 2s ease-out;
  transition: background 2s ease-out;
  color: #fff
}

.button:hover {
 background-size:0 200px; 
background-position:100;  
  text-decoration: none
}

.button-super {
 
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 35px
}
<a href="myURL" target="_self" rel="follow" class="button button-super">CLICK HERE</a>

Upvotes: 1

Related Questions