我的轉換無法正常工作？

創建此按鈕時，我希望它在活動時具有漸變過渡效果，但似乎它不起作用，我無法弄清楚原因。谷歌瀏覽器不會阻止屬性的，但他們似乎只是無能爲力..我的轉換無法正常工作？

這是按鈕的樣子：

.button { 
    color: #fff !important; 
    font-size: -63px; 
    font-family: "CentraleSans-Bold","Helvetica Neue",Helvetica,Arial; 
    line-height: 265%; 
    text-decoration: none; 
    background-color: #167de4; 
    padding: 0 20px; 
    display:inline-block; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -o-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-background-clip: padding; 
    -moz-background-clip: padding; 
    border: 1px solid #1d4ea4; 
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.23),inset 0 1px 0 rgba(255,255,255,0.19); 
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #3669ef), color-stop(100%, #4f95f4)); 
    background-image: -webkit-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%); 
    background-image: -moz-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%); 
    background-image: -o-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%); 
    background-image: linear-gradient(bottom, #3669ef 0%,#4f95f4 100%); 
    text-shadow: 0 1px 2px rgba(0,0,0,0.75); 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    vertical-align: middle; 
    }

這是過渡的樣子：

a{ 
-webkit-transition: all 0.05s ease-in-out; 
-moz-transition: all 0.05s ease-in-out; 
-o-transition: all 0.05s ease-in-out; 
transition: all 0.05s ease-in-out; 
}

的HTML看起來像這樣：

<a class="button" href="#" style="opacity: 1;">Create an account</a>

感謝您的幫助:)

來源

2013-06-21 User

所以這裏的'鍵：active'？ –

我不認爲應該需要這樣做，因爲我已經推出了'a'轉換 – User

轉換意味着兩種狀態。 'a'只是其中的一個 –

您需要添加.button:active

DEMO http://jsfiddle.net/kevinPHPkevin/dfw8B/

.button:active { 
     background:red; 
}

來源

2013-06-21 21:52:47 Vector

您可以將HTML添加到問題中嗎？你在'按鈕'上有漸變，但是在'a'上有漸變。

來源

2013-06-21 21:41:42 robtarr

的HTML看起來是這樣的：Create an account 似乎也沒有改變任何東西！ – User

我的轉換無法正常工作？

回答

相關問題