css 实现按钮样式使用背景图或者背景色，鼠标放上去按钮改变背景图或者背景色

1、css 实现按钮样式使用背景色，鼠标放上去按钮背景色，不需要过渡效果的把transition 两句去掉。

 鼠标放上去： 

<button type="button" class="el-button"><span>确定</span></button>

        button{
            outline: 0;
        }
        .el-button {
            padding: 0 24px;
            border: 1px solid #1E9FFF;
            font-size: 14px;
            color: #1E9FFF;
            -webkit-transition: background-color .3s ease-in, border-color .3s ease-in;
            transition: background-color .3s ease-in, border-color .3s ease-in;
            line-height: 26px;
            border-radius: 4px;
            cursor: pointer;
        }
        .el-button:hover {
            background-color: #1E9FFF;
            color: #fff;
        }

 

2、css 实现按钮样式使用背景图，鼠标放上去按钮改变背景图

鼠标放上去： 

        .el-button {
            padding: 8px 16px;
            border: none;
            background: url(../images/save-btn.png) no-repeat;
            background-size: 100% 100%;
            color: #00F6FF;
            cursor: pointer;
        }
        .el-button:hover {
             background: url(../images/save-btn-hover.png) no-repeat;
             color: #000;
             background-size: 100% 100%;
         }