Trying to create button using arrow-CodePudding

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  href="">LEARN MORE</a>

Hope to see any solution for it using css. so button borders can cut or something..

CodePudding user response：

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  href="">LEARN MORE</a>
</div>

CodePudding user response：

closest style to what you want is 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 to 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: -15px;
  top: 15%;
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}

<div>
  <a  href="">LEARN MORE</a>
</div>