Heim >Web-Frontend >HTML-Tutorial >用事件与CSS改变按钮不同状态下的颜色_html/css_WEB-ITnose

用事件与CSS改变按钮不同状态下的颜色_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:21:141366Durchsuche

目标效果:

    表单的群发按钮,在鼠标悬停时为深蓝色,鼠标离开时为淡蓝色。

HTML代码:

    
            

CSS代码:

.btn{
    color:#ffffff;
    background:#44b549;
    padding-top:3px;
    border-top: 1px solid #44b549;
    border-right: 1px solid #44b549;
    border-bottom: 1px solid #44b549;
    border-left: 1px solid #44b549;
    width:100px;
    height:30pt;
    font-size:15pt;
    border-radius:3em;
    background-image: linear-gradient(to bottom, #44b549 0px, #44b549 100%);
    -moz-border-radius: 5px;
}     注意一定不能少了这一段,此段定义打开页面时按钮的初始样式。若没有这段,页面打开时按钮不显示样式,直至有鼠标悬停。

 

.input_move{
    color:#ffffff;
    background:#006600;
    padding-top:3px;
    border-top: 1px solid #006600;
    border-right: 1px solid #006600;
    border-bottom: 1px solid #006600;
    border-left: 1px solid #006600;
    width:100px;
    height:30pt;
    font-size:15pt;
    border-radius:3em;
    background-image: linear-gradient(to bottom, #006600 0px, #006600 100%);
    -moz-border-radius: 5px;
}
.input_out{
    color:#ffffff;
    background:#44b549;
    padding-top:3px;
    border-top: 1px solid #44b549;
    border-right: 1px solid #44b549;
    border-bottom: 1px solid #44b549;
    border-left: 1px solid #44b549;
    width:100px;
    height:30pt;
    font-size:15pt;
    border-radius:3em;
    background-image: linear-gradient(to bottom, #44b549 0px, #44b549 100%);
    -moz-border-radius: 5px;
}

    

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn