Is it possible to have a form button with an image / icon?

0 favourites
  • 5 posts
From the Asset Store
About 900+ game portals: 400 e-mails, 514 contact/submit forms (last update: 2022, October, +275 contacts)
  • Its me again, with my old friends, the form buttons. For accessibility reasons, I have to use those and can't use sprites to make buttons out of.

    I am wondering if its possible to embed an image in the button. In CSS for websites, there are multiple ways. I tried to embed an image with a weblink which did not work. I am wondering if it is possible at all, and I did it wrong, or if its not something that construct supports.

  • You could probably use the background-image css property, though you would need to import the image as a file (not a sprite) and I'm not sure if you would have access to it when previewing (but certainly after export).

    Alternatively you can change the opacity of the button to 0 and put a normal sprite below it.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thank you for your answer! It kinda works, but it was a bit tricky to get done. This is how I managed to do it in the end:

    I set the property "background-image" to "url(images/myimage.png)" -> the images are saved in the images folder after export, not in the Files folder (as I first thought).

    BUT the sprites are combined on a sprite sheet. In order to display just one specific file, I had to put the image into the image folder in the zip file AFTER exporting it.

    By the way, the form buttons don't have the opacity option.

    But anyways, it works now, so thanks again!

  • I meant that you import it into the "files" section of your project, then it's not saved into the sprite-sheet.

    You can set the opacity with css

    opacity: 0;

  • I meant that you import it into the "files" section of your project, then it's not saved into the sprite-sheet.

    You can set the opacity with css

    opacity: 0;

    Oh thank you, setting the opacity with css works. Neat!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)