從側面按鈕上的CSS過渡

我正在處理一個按鈕，它可以在懸停時更改背景顏色和顏色CSS屬性。基本的東西。從側面按鈕上的CSS過渡

<span>Contact me</span> 

.contact-right span{ 
    background-color: #fff; 
    color: #f87f73; 
    padding: 0px 25px; 
    border: 5px solid #f87f73; 
} 

.contact-right span:hover{ 
    background-color: #f87f73; 
    color: #fff; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
}

不是這個工作正常，我順利看到過渡效果，背景顏色和顏色變化平穩。但是我想要一個特定的事情，從按鈕的左邊到右邊進行轉換。我的意思是，過渡不應該只是一次對整個按鈕起作用，它應該從左側滑入，並將文本的背景顏色和顏色從左側改爲右側。

我該如何做到這一點？它可以通過CSS來完成，或者我必須以某種方式使用Jquery？

來源

2014-09-22 Rohan

你可以提供一個小提琴？ – 2014-09-22 09:25:25

你應該嘗試玩：之前：after僞元素，如顯示在this codrops article：

.contact-right { 
    position: relative; 
    background-color: #fff; 
    color: #f87f73; 
    padding: 5px 25px; 
    border: 5px solid #f87f73; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
    cursor: pointer; 
} 

.contact-right:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0%; 
    height: 100%; 
    background-color: #f87f73; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
} 

.contact-right:hover { 
    color: #fff; 
} 

.contact-right:hover:before { 
    width: 100%; 
    color: #fff; 
}

JSFiddle

來源

2014-09-22 09:37:33

好吧！你的代碼絕對有效。但我不明白如何！請解釋？ – Rohan 2014-09-22 17:05:29

我結合使用了HTML僞元素（：before）和CSS3轉換。 On：hover，我只是將一個完整的寬度設置爲：before僞元素，其初始寬度爲0px，寬度過渡爲0.35s linear。 – 2014-10-04 15:16:36

是的，我最終得到了它。謝謝！ :) – Rohan 2014-10-04 15:19:34

我希望這是如何ü希望它..

DEMO

.contact-right span{ 
    background-color: #fff; 
    color: #f87f73; 
    padding: 0px 25px; 
    border: 5px solid #f87f73; 
    display: block; 
    background-image: linear-gradient(to left, 
             transparent, 
             transparent 50%, 
             #00c6ff 50%, 
             #00c6ff); 
    background-position: 100% 0; 
    background-size: 200% 100%; 
    transition: all .25s ease-in; 

} 

.contact-right span:hover{ 
background-position: 0 0; 
    background-color: #f87f73; 
    color: #fff; 
    -webkit-transition: all .35s ease; 
    -o-transition: all .35s ease; 
    transition: all .35s ease; 
}

Source

來源

2014-09-22 09:38:58

這也在工作，但我不明白這個代碼如何工作。 – Rohan 2014-09-22 17:54:59

你可以使用僞元素來達到這種效果

FIDDLE

span{ 
 
    background-color: #fff; 
 
    color: #f87f73; 
 
    padding: 0px 25px; 
 
    border: 5px solid #f87f73; 
 
    position:relative; 
 
} 
 

 
span:hover:before { 
 
    content: attr(data-text); 
 
    background: #f87f73; 
 
    color: #fff; 
 
    width: 130px; 
 
    visibility: visible; 
 
    opacity:1; 
 
} 
 
span:before { 
 
    content: ''; 
 
    display:block; 
 
    position: absolute; 
 
    padding: 0px 25px; 
 
    box-sizing: border-box; 
 
    width: 1%; 
 
    height: 100%; 
 
    -webkit-transition: all .35s ease; 
 
    -o-transition: all .35s ease; 
 
    transition: all .35s ease; 
 
    visibility: hidden; 
 
    opacity:0; 
 
}

<span data-text="Contact me">Contact me</span>

來源

2014-09-22 09:40:09 Danield

從側面按鈕上的CSS過渡

回答

相關問題