I'm trying to make this text align with the border. However, as of now what I have found are just mismatches.

Defect menu-button img

.subscribe-now { 
position: absolute;
display: table-cell;
text-align: center;
background-color: #eb5e28;
line-height: 1em;
border-radius: 25px;
padding: 0.5rem 1rem;
vertical-align: center !important;
width: 200px !important;
height: 40px !important; // If I change this to auto then the size is so big and I need minus padding :(
padding-top: 0px;
padding-bottom: 0px;
border-image: 
margin-left: 20px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}

CodePudding user response：

You can try this approach. See if this works for you. Let me know

.subscribe-now { 

text-align: center;
background-color: #eb5e28;
border-radius: 25px;
vertical-align: middle;
width: 200px;
height: 40px ;
color: white;
font-weight: bold;
border: 0px solid #eb5e28;
}

<button >Langganan Sekarang</button>