CODEWITHSUNDEEP
cssbuttoncss-transitionslinear-gradients
David
David

Reputation: 53

How to get button animation with gradient slide in and out on hover in CSS

Im trying to acomplish two things.

1) Gradient from left to right on hover

2) Gradient from right to left when there's no hover

3) Also Im trying to get rid of some kind of right grey border right at firefox

Here's my code:

HTML:

                <a class="btn-main" href="#">Przejdź do sklepu </a>

CSS:

.btn-main {
    color: #000000;
    border-left: solid 1px #000000;
    padding: 8px 12px;
    font-weight: 700;
    text-decoration: none;
}
.btn-main {
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to right, white 50%, black 50%);
                      background-image: -moz-linear-gradient(to right, white 50%, black 50%),
                      linear-gradient(to right, black 50%, white 50%);
                      background-image: -webkit-linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to right, white 50%, black 50%);               
    transition: background-position left 0.5s linear; 
    -webkit-transition: background-position left 0.5s linear; 
    -moz-transition: background-position left 0.5s linear; 
    -o-transition: background-position left 0.5s linear; 
    -webkit-background-clip: text, border-box;
    -moz-background-clip: text, border-box;
    background-clip: text, border-box; 
    color: transparent;
    -webkit-text-fill-color: black;
}
.btn-main:hover {
    background-position: -100% 0;
    color: #ececec;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);
    -webkit-text-fill-color: #ececec;   
}

Right now it's working fine when I make it hover (1), but I cant find solution to gradient when there's no hover (2) and how to get rid of this grey border right on Firefox (3).

Please help.

My fiddle:

https://jsfiddle.net/6fx64L8j/3/

Upvotes: 0

Views: 2786

Answers (2)

Saravana
Saravana

Reputation: 3496

Try this. 

.btn-grad {
    background: transparent;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    padding: 50px;
    text-transformation: uppercase;
    font-family: 'arial', sans-serif;
    font-weight: bold;
    margin-top: 45px;
    color: #000;
    padding: 20px;
    display: block;
    background-image: linear-gradient(to left, transparent, transparent 50%, #ff0000 50%, #00c6ff);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    text-decoration:none;
}

.btn-grad:hover {
    background-position: 0 0;
    color: #333;
}
<a href="#" class="btn-grad">Button</a>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272723

You can simplify your code like this:

.btn-main {
  color: #000;
  border-left: solid 1px #000;
  padding: 8px 12px;
  font-weight: 700;
  text-decoration: none;
  background-size: 0% 100%;
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  transition: all 0.5s linear;
  color: #000;
}

.btn-main:hover {
  background-size: 100% 100%;
  color: #ececec;
  transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);
}
<a class="btn-main" href="#">Przejdź do sklepu </a>

Upvotes: 2

Related Questions