Add Button on top of Image – Pure HTML

  • hunterravenflame006 · Member ·

    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:

    IMAGE_DESCRIPTION
    I tried the following code with no success:

    IMAGE_DESCRIPTION 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 ·

    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 -->
  • The topic ‘Add Button on top of Image – Pure HTML’ is closed to new replies.