按钮上的CSS3颜色过渡

时间:2013-03-17 15:30:10

标签: css3 colors css-transitions transition

我似乎无法使用CSS3过渡来改变颜色。我已成功使用环形交叉口相同的代码和标签,但按钮没有运气。

以下是代码:

.button {
    position:absolute;
    width: 135px;
    height: 46px;
    background-color: #ef6529;
    text-decoration: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #c33b00;
    box-shadow: 0px 4px 0px #af5a5a;
    -moz-box-shadow: 0px 4px 0px #af5a5a;
    -webkit-box-shadow: 0px 4px 0px #af5a5a;
    -webkit-transition:color 1s ease-in;  
    -moz-transition:color 1s ease-in;  
    -o-transition:color 1s ease-in;  
    transition:color 1s ease-in;
}

.button:hover {
    width: 135px;
    height: 46px;
    background-color: #ff6726;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #c33b00;
    text-decoration: none;
}

和HTML:

<a href="#" class="button">
    <!--<h2>PUSH ME!</h2>-->
</a>

干杯!

1 个答案:

答案 0 :(得分:0)

您尚未指定按钮的颜色。我认为你想要转换背景颜色。只需将transition:color 1s ease-in;更改为transition: background-color 1s ease-in;