当悬停在我的按钮上时，想要一个交易效果（按钮开始从左到右填充渐变颜色），

Question

我希望我的按钮在悬停时填充渐变颜色，并具有从左到右的横断面效果，最初按钮为白色背景 旧答案有相反的效果我正在寻找的是不一样的 我的html代码

<a href="" class="btn-rounded read-more blog-read-more-footer" target="_blank">Read more</a>

我想知道如何使用 CSS 来实现。

Answer 1

检查这个：

    *{
      padding:5px;
    }
    a{
        text-decoration:none !important;
    }
    a:hover{
        text-decoration:none !important;
    }
    .button {
      display: block;
      position: relative;
      padding: 10px 0;
      width: 150px;
      border-radius:5px;
      color: #fff;
      text-align: center;
      background-color: #774df4;
      border: none;
    }
    .button.one:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background-color: rgba(255,255,255,0.4);
    	-webkit-transition: none;
    	   -moz-transition: none;
    	        transition: none;
    }
    .button.one:hover:after {
      width: 120%;
      background-color: rgba(255,255,255,0);
      
    	-webkit-transition: all 0.4s ease-in-out;
    	   -moz-transition: all 0.4s ease-in-out;
    	        transition: all 0.4s ease-in-out;
    }

    /* Two */
    .button.two {
      background-repeat: no-repeat;
      background-position: -120px -120px, 0 0;
      
      background-image: -webkit-linear-gradient(
        top left,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
      );
      background-image: -moz-linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
      );    
      background-image: -o-linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
      );
      background-image: linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
      );
      
      -moz-background-size: 250% 250%, 100% 100%;
           background-size: 250% 250%, 100% 100%;
      
      -webkit-transition: background-position 0s ease;
         -moz-transition: background-position 0s ease;       
           -o-transition: background-position 0s ease;
              transition: background-position 0s ease;
    }

    .button.two:hover {
      background-position: 0 0, 0 0;
      
      -webkit-transition-duration: 0.5s;
         -moz-transition-duration: 0.5s;
              transition-duration: 0.5s;
    }
    
    /* Last Button css starts */

    
    
  .c-button {
  color: #000;
  font-weight: 700;
  font-size: 1em;
  text-decoration: none;
  padding: 0.7em 1.8em;
  cursor: pointer;
  display: inline-block;
}
.c-button--gooey {
  color: #06c8d9;
  font-size: 1.3em;
  letter-spacing: 2px;
      border-radius:5px;
  border: 2px solid #06c8d9;
  padding: 1.2em 3.4em;
  position: relative;
  transition: all 700ms ease;
}
.c-button--gooey .c-button__blobs {
  filter: url(#goo);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}
.c-button--gooey .c-button__blobs div {
background:linear-gradient(to right,#61dce4,#0083ef);
width: 100%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(2) translateX(-250%) translateZ(0);
  transition: all 1.1s ease;
}

.c-button--gooey:hover {
  color: #fff;
}
.c-button--gooey:hover .c-button__blobs div {
  transform: scale(2.4) translateX(15%) translateZ(0);
}
  
    
    
    

    <br/>
    <a href="#" title="Button One" class="button one">Button 1</a>


    <br />
    <a href="#" title="Button Two" class="button two">BUTTON 2</a>
    <br />

    <input name="" value="Submit" type="submit" class="button two">

<br/>

    <a href=" " class="c-button c-button--gooey">
BUTTON      <div class="c-button__blobs">
        <div></div>
      </div>
    </a>