html搜索框按钮模板

点击移入有阴影

html

<div class="last_right three" style="width: 25%;">
                <h2>
                    <span class="last_text">SEARCH</span>
                    <span style="float: right;margin-left: 20px;font-size: 14px;color: #999;">more+</span>
                </h2>
                
                <span>
                    <input type="text" placeholder="Search" class="input">
                    <span class="span" style="cursor: pointer;"><img src="../img/sousuo.png" alt=""></span>
                </span>

                <h2 style="margin-top: 50px;">
                    <span class="last_text">留言</span>
                    <span style="float: right;margin-left: 20px;font-size: 14px;color: #999;">more+</span>
                </h2>
                <span>
                    <input type="text" placeholder="姓名" class="input">
                    <input type="text" placeholder="e-mail" class="input">
                    <input type="text" placeholder="联系方式" class="input">
                    <textarea class="shuru" cols="30" rows="10"></textarea>
                    <button class="but" type="button" id="admin-btn" onclick="tijiao()">留言</button>
                </span>
            </div>

css

.input{
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    background-color: rgb(45,45,63);
    border: 1px solid #312E3D;
    border-radius: 10px;
}
.input:hover{
    box-shadow: 0 0 5px black;
}
.but{
    width: 300px;

    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;

    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
}
.but:hover{
    box-shadow: 0 0 5px black;
}