简介

本文主要介绍如何用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; /* 深绿色 */
        }