Question

我想制作我的按钮，如图所示，带有渐变的Silver-ish Border。除了边境之外，我已经完成了所有工作。下面是我当前的按钮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;

你可能不得不玩它，但希望它是一个开始。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用相应的z-index制作边距并将另一个具有相同宽度和背景渐变的div放入其中。

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>

带有渐变边框的CSS按钮

3 个答案: