纯css样式按钮

简介

本文主要介绍如何用css定制一个简单的按钮

组成部分


 
 
html按钮代码
无操作时按钮样式
鼠标经过时按钮样式
鼠标点击时按钮样式

   
   

html

<button type="submit" name="submit_button" class="contact_button">发送</button>


无操作时按钮样式

        .contact_button {
            display: block;
            background: #aacf53; /* 绿色 */
            color: #fff;
            border: solid 4px #aacf53; /* 绿色 */
            font-size: 1.4em;
            border-radius: 5px;
        }


鼠标经过时按钮样式

        .contact_button:hover {
            background: #82ae46; /* 绿色加浓 */
            border: solid 4px #82ae46; /* 绿色加浓 */
        }


鼠标点击时按钮样式

        .contact_button:active {
            background: #69821b; /* 深绿色 */
        }


查看原文：https://www.huuinn.com/archives/516
更多技术干货：风匀坊
关注公众号：风匀坊