CODEWITHSUNDEEP
htmlcssbutton
Code4Bread
Code4Bread

Reputation: 193

CSS Button with Gradient Border

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.

This is the image of button I have and need

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

Upvotes: 2

Views: 2741

Answers (3)

James Shourov
James Shourov

Reputation: 1

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

Upvotes: 0

Kairat Kempirbaev
Kairat Kempirbaev

Reputation: 176

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

Upvotes: 0

flygaio
flygaio

Reputation: 121

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>

Upvotes: 3

Related Questions