CSS Button with Gradient Border

Question

I want to make my button as seen in picture with Silver-ish Border with gradient. I have done everything except the border which I am stuck with it. Below is my current CSS for the button.

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

Possible duplicate of [CSS3 Gradient Borders](https://stackoverflow.com/questions/2717127/css3-gradient-borders) — Fred Gandt, Jul 28 '17 at 04:34
@FredGandt I have checked that before....It's not really what I want..anyway thank you. — Code4Bread, Jul 28 '17 at 04:44

score 3 · Accepted Answer · answered Jul 28 '17 at 04:40

Adding a box-shadow gets it pretty close. You could also play with a :before psuedo-element to get the white background.

The key part I added is:

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

You'll probably have to play around with it but hopefully its a start.

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

My first comment went somewhere...anyway Thank you....This gets as close as what I want.... — Code4Bread, Jul 31 '17 at 09:39

score 0 · Answer 2 · answered Jul 28 '17 at 05:35

0

You can make margin and put another div with the same width and background gradient inside with corresponding z-index .

answered Jul 28 '17 at 05:35

Kairat Kempirbaev

166
1
12

score 0 · Answer 3 · answered Jul 28 '17 at 06:39

.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 Button with Gradient Border

3 Answers3