前端存储--简约的input样式

蔚落 2022-05-31 01:22 194阅读 0赞

**一、输入框**

** 1）代码：**

.login_input_password{
        width: 250px;
        height: 42px;
        margin-top: 25px;
        margin-left: 50px;
        padding: 0 38px;
        background: #2d2d2d;
        background: rgba(45,45,45,.15);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #3d3d3d;
        border: 1px solid rgba(255,255,255,.15);
        -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        font-family: 'PT Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.1);
        -o-transition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -ms-transition: all .2s;
    }

2）效果图

![SouthEast][]  
**二、按钮**

**1）代码：**

.login_input_submit{
        cursor: pointer;
        width: 160px;
        height: 44px;
        margin-top: 40px;
        margin-left: 50px;
        padding: 0;
        background: #ef4300;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #ef4300;
        -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
        -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 0 2px 7px 0 rgba(0,0,0,.2);
        box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 0 2px 7px 0 rgba(0,0,0,.2);
        font-family: 'PT Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.1);
        -o-transition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -ms-transition: all .2s;
    }

2）效果图：

![SouthEast 1][]

3）两个按钮对应的颜色代码：

登陆按钮：\#ef4300

注册按钮：\#93DCD9

[SouthEast]: /images/20220531/aa8efb83f44143adbb0cdb75d9deb65a.png
[SouthEast 1]: /images/20220531/0f9225e9772341a7a3165702cda93bb6.png