Trying to create button using arrow - html

Question

I am trying to create a button with an arrow same as the below image:
But when I do that using the below code it looks like this:
My Code:
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url(../img/image-left.svg);
position: absolute;
left: -15px;
top: 23%;
/*background: #fff;*/
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<a class="ms-btn" href="">LEARN MORE</a>
Hope to see any solution for it using css. so button borders can cut or something..

Answer 1

Add to you code the background-color for the 'svg' and adjust the position top. that was it.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -15px;
top: 15%;
background: #fff;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>

Answer 2

Use clip-path to cut the border. I have added 2 CSS variables to control the cut area:
.ms-btn {
--s: 15px;
--b: 10px;
display: inline-block;
margin: 50px;
color: #3E5B73;
font-size: 12px;
padding: 16px 28px;
position: relative;
transition: 0.3s all linear;
}
/* the border */
.ms-btn:before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #3E5B73;
border-radius: 40px;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--s)),var(--b) calc(50% + var(--s)),var(--b) calc(50% - var(--s)),0 calc(50% - var(--s)));
}
/* the arrow */
.ms-btn:after {
content: "";
position: absolute;
left: -10px;
top: calc(50% - 10px);
background: red;
height: 20px;
width: 20px;
}
<a class="ms-btn" href="">LEARN MORE</a>

Answer 3

The closest style to what you want is that I noted below. I remove left border and reduce top and bottom left border radius. You can increase or decrease them as you want. This arrow doesn't have and doesn't need background color and I think it will solve you problem and meet your need.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border-width: 2px 2px 2px 0px;
border-color: #3E5B73;
border-style: solid;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 20px 40px 40px 20px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -25px;
top: 15%;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>