css 好看的提交按钮样式

在网站设计中，提交按钮常常是不可避免的元素。但是很多人对于它的样式并不太在意，导致整个页面看起来比较普通。使用CSS可以轻松地优化提交按钮的外观，让它变得更加美观。下面是一些用CSS实现提交按钮漂亮样式的示例：

/* 1. 渐变背景 */button {
        background-color: #196ead;
        background-image: linear-gradient(to bottom, #196ead, #064a80);
        color: #fff;
        border: 0;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
}

/* 2. 牛角边框 */button {
        background-color: #4b4b4b;
        color: #fff;
        border: 0;
        padding: 10px 20px;
        border-radius: 0;
        position: relative;
        cursor: pointer;
}
button::before, button::after {
        content: ';
        border: 10px solid transparent;
        position: absolute;
        top: 0;
}
button::before {
        left: -20px;
        border-right-color: #4b4b4b;
}
button::after {
        right: -20px;
        border-left-color: #4b4b4b;
}

/* 3. 立体效果 */button {
        background-color: #7eb8da;
        color: #ffffff;
        border: none;
        border-radius: 10px;
        box-shadow: inset 0 -3PX 0 0 #468ecb, 0 3PX 0 0 #0085ca;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        padding: 15px 20px;
        text-shadow: 0 -1px 0 #3e87a3;
}
    

以上三种样式只是其中的一部分，实际上可以通过不同的CSS样式实现不同的提交按钮样式。通过合理运用CSS，可以让提交按钮不再是一个被忽略的元素，而是成为页面的一个亮点。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！