纯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; /* 深绿色 */
        }

发表评论

电子邮件地址不会被公开。 必填项已用*标注