Can I add an ::after statement to value="my button text"? [RESOLVED]

Get Help
, ,
1

Hi,

Anyone have an idea how I can add an ::after statement to value=“my button text”? My client has asked if I can add a star after the value on a GF form submit button like the little star on the example image.

Screenshot 2022-07-19 at 21.42.42
Screenshot 2022-07-19 at 21.42.42826×132 2.32 KB

Any help would be greatly appreciated!
Andy

2

::after is not supported for input tags, so you can’t use it for the submit button.

You could try adding the icon using the gform_submit_button filter, there’s an example in the filter documentation that could help: gform_submit_button - Gravity Forms Documentation

3

I’ve also used the following CSS to set an icon via background-image for the submit input element:

body .gform_wrapper .gform_footer .gform_button[type="submit"] {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="m511.6 36.86l-64 415.1a32.008 32.008 0 0 1-31.65 27.147c-4.188 0-8.319-.815-12.29-2.472l-122.6-51.1l-50.86 76.29C226.3 508.5 219.8 512 212.8 512c-11.5 0-20.8-9.3-20.8-20.8v-96.18c0-7.115 2.372-14.03 6.742-19.64L416 96L122.3 360.3L19.69 317.5C8.438 312.8.812 302.2.062 289.1s5.47-23.72 16.06-29.77l448-255.1c10.69-6.109 23.88-5.547 34 1.406S513.5 24.72 511.6 36.86z"%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 1rem 50%;
    padding-left: 3rem;
}

Those rules produces the following and could readily be tweaked to bump the image to the right of the text.

image
image1066×152 2.11 KB

2 Likes
4

Thanks for the assistance chaps!

Got it working in the end using a background image as suggested by Joshua :blush:

1 Like