Add Button on top of Image – Pure HTML

• 

  hunterravenflame006 · Member · Apr 27, 2020 at 3:56 pm

  • Copy link
  • Add topic to favorites

  I am trying to add a button on top of an image. I do not have a WordPress business account, so I can’t use CSS or plug-ins, therefore my code must be pure HTML. I do not want to upgrade until I know that I can do this successfully. When you initially create an image block in WordPress this is the HTML it generates:

  

  I tried the following code with no success:

  BUTTON

  I am trying to get this HTML code to add the button on top of the image and be able to set its x and y position. Any help would be greatly appreciated. Thanks!
• 

  hunterravenflame006 · Member · Apr 27, 2020 at 3:57 pm

  • Copy link

  Apologies, the code did not format correctly in my original post.

  When you initially create an image block in WordPress this is the HTML it generates:

  <!-- wp:image {"id":218,"sizeSlug":"large"} -->
       <figure class="wp-block-image size-large">
            <img src="IMAGE_LINK" alt="IMAGE_DESCRIPTION" class="wp-image-218"/>
       </figure>
  <!-- /wp:image -->

  I tried the following code with no success:

  <!-- wp:image {"id":218,"sizeSlug":"large"} -->
       <div class="container">
            <figure class="wp-block-image size-large">
                 <img src="IMAGE_LINK" alt="IMAGE_DESCRIPTION" class="wp-image-218"/>
                      <button class="wp-block-button">
                           <a class="wp-block-button__link">
                                BUTTON
                           </a>
                      </button>
            </figure>
       </div>
  <!-- /wp:image -->