Button with gradient outside border - html

Question

How can I achieve the next thing in CSS to a < a > element ?
Image1
I managed to do something like this:
https://jsfiddle.net/25abxak1/
-- first of , I need the content to be wider and second , I want the first color to go above the border , just like in the picture.
I'm a begginer in CSS and I really need help.
Thank you

Answer 1

You can use display: inline-block on a, and for black part you can use :before pseudo-element. You should also set padding-left on a to width of :before + padding-right so that text is centered.
a {
color: #C46439;
background: none;
border-radius: 10px;
border: 1px solid #D2D1D1;
position: relative;
overflow: hidden;
padding: 10px 30px;
padding-left: 70px;
display: inline-block;
text-decoration: none;
}
a:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 40px;
background: black;
}
Centered text
You can also use linear-gradient and set black part to 20% or something similar.
a {
color: #C46439;
background: linear-gradient(to right, black 0%, black 20%, white 20%, white 100%);
border-radius: 10px;
border: 1px solid #D2D1D1;
position: relative;
overflow: hidden;
padding: 10px 30px;
padding-left: 70px;
display: inline-block;
text-decoration: none;
}
Centered text