customize image banner button

[doarchery]

my site is do-archery.com on the main image banner i have been trying for hours trying to find an elegant solution i need a place to put a headline on the image, also the button looks kind of terrible i was thinking something like a pill shape in my purple color, and some sort of arrow pointing to the right 

[Dan-From-Ryviu]

Add this code to Custom CSS of that Image banner section 

.button { background-color: transparent; color: #fff; }
.button:after { border-radius: 25px; }

Related to adding heading on the image, please click + Add block under Image banner section > Heading to added heading 

[doarchery]

thank you, but it is a little more complicated i have two image banners i want this to only apply to the first one and i still have to move the heading and the text far enough to the left to avoid blocking the subject

[Viralmint]

Hello @doarchery 

Please add below css code into base.css file

.banner__buttons a.button.button--primary {
background: #b26cff;
color: #fff;
border-radius: 50px;
}
.banner__buttons a.button.button--primary:after,
.banner__buttons a.button.button--primary:before {
border-radius: 50px;
}
svg.icon.icon-arrow {
margin-left: 5px;
}

Please below svg code in slideshow liquid file 

<svg viewBox="0 0 14 10" fill="none" aria-hidden="true" focusable="false" role="presentation" class="icon icon-arrow" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill="currentColor">
</svg>

[doarchery]

i appreciate this, but i would prefer if the text and button were completely out of the way of the subject of the photo