帶漸變邊框的CSS按鈕

Question

我要使按鈕如圖所示帶有漸變的銀色邊框。 除了邊界，我已經做了一切。 以下是該按鈕的當前CSS。

.button_submit {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0cbbc8), color-stop(1, #008995));
    background:-moz-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-webkit-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-o-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:-ms-linear-gradient(top, #0cbbc8 5%, #008995 100%);
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cbbc8', endColorstr='#008995',GradientType=0);
    background-color:#0cbbc8;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
}
.button_submit:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008995), color-stop(1, #0cbbc8));
    background:-moz-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-webkit-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-o-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:-ms-linear-gradient(top, #008995 5%, #0cbbc8 100%);
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008995', endColorstr='#0cbbc8',GradientType=0);
    background-color:#008995;
}
.button_submit:active {
    position:relative;
    top:1px;
}

Answer 1

添加一個box-shadow可以使它非常接近。 您也可以使用:before psuedo-element來獲得白色背景。

我添加的關鍵部分是：

box-shadow: 0px 2px 5px -1px #333;

您可能必須嘗試一下，但希望它是一個開始。

 .button_submit { position: relative; box-shadow: 0px 2px 5px -1px #333; background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); background-color:#0cbbc8; border-radius:6px; border:1px solid #ffffff; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; } .button_submit:hover { background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%); background-color:#008995; } .button_submit:active { position:relative; top:1px; } 

 <button class="button_submit"> Submit </button> 

Answer 2

您可以設置邊距，然后將另一個具有相同寬度和背景漸變的div放入相應的z-index。

Answer 3

 .button_submit { position: relative; background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); background-color:#0cbbc8; border-radius:6px; border:1px solid linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; } .button_submit:hover { background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%); background-color:#008995; } .button_submit:active { position:relative; top:1px; } 

 <button class="button_submit"> Submit </button>