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

[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