Archived topic
Call to Action square button with aligned SVG
5 replies · Started by reallybasic on April 1, 2021
Hi,
Looking to get a call to Action button for mobile site like this one.
It has one verticals partitioning line on the left of the button, an SVG icon aligned well in middle and text under the SVG icon.
http://test.officepc.online/1/
How do I achieve this?
Hi there,
Does this call to action button only appear on mobile?
You should be able to insert custom HTML for buttons like this on the Header Widget area on Appearance > Widgets.
Thank you. Yes, it is for mobile only so I will set hide-on-desktop and tablet class.
But main issues are
1. How to have a coloured-line (vertical) just left to the button.
2. how to have the SVG aligned well so it looks like the link I provided above.
3. how to have 'call us' text under it aligned.
for #1:
add border-left: 2px solid [your color here] to the main element wrapper this button you'll be creating.
for #2 and #3:
Assuming you'll go full custom HTML, you'll need flexbox styling.
This can be done with simple justify-content: center and align-content: center applied to the wrapper element.
Examples: (applied on paragraphs, can be applied on your case as well)
https://codepen.io/karloespiritu/pen/rVjVoy
https://codepen.io/kccnma/pen/mvLzBw
Thank you, I ended up just using a button (built in button class) instead of trying to menu item as a button.
Ah yes that's right that works as well. Glad you got it sorted. No problem. :D
