Issue in creating border for button using HTML - css

Question

I'm trying to create a button.
How can I create a border left like this image?
<a class="genericBtn">
<span>Click Me</span>
</a>
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
width: auto;
}

Answer 1

You can consider a gradient coloration for the left side:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:linear-gradient(to bottom,#c40009 20%,transparent 20%,transparent 80%,#c40009 0) left/1px 100% no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Another syntax for the same effect:
.genericBtn {
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
/**/
border-left:none;
background:
linear-gradient(#c40009,#c40009) top left,
linear-gradient(#c40009,#c40009) bottom left;
background-size:1px 20%;
background-repeat:no-repeat;
/**/
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 50px;
display:inline-block;
}
<a class="genericBtn">
<span>Click Me</span>
</a>

Answer 2

A quick hack with :before
.genericBtn {
position: relative;
cursor: pointer;
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
padding: 0 50px;
height: 50px;
display: inline-block;
width: auto;
line-height: 50px;
}
.genericBtn:before {
position: absolute;
top: 10px;
left: -1px;
width: 1px;
height: 30px;
background: #fff;
content: "";
display: block
}
<a class="genericBtn">
<span>Click Me</span>
</a>
Adjust heights according to requirements.