Printable Version of Topic

Posted by: AAG1991 Jun 13 2023, 12:36 PM

Hey everyone! I am using this code section for an HTML template to create a button. While the button appears, it isn't clickable, and there isn't a space to add to the website. This is beyond my basic HTML ability.

Can you assist in making the button clickable and go to a website?

Here is the code:

<table style="font-family: 'Open Sans',sans-serif;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="v-container-padding-padding" style="overflow-wrap: break-word; word-break: break-word; padding: 10px; font-family: 'Open Sans',sans-serif;" align="left"><!-- [if mso]><style>.v-button {background: transparent !important;}</style><![endif]-->
<div align="center"><!-- [if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:38px; v-text-anchor:middle; width:128px;" arcsize="10.5%" stroke="f" fillcolor="#253e85"><w:anchorlock/><center style="color:#FFFFFF;font-family:'Open Sans',sans-serif;"><![endif]--> <a class="v-button" style="box-sizing: border-box; display: inline-block; font-family: arial,helvetica,sans-serif; text-decoration: none; -webkit-text-size-adjust: none; text-align: center; color: #ffffff; background-color: #253e85; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; width: auto; max-width: 100%; overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; mso-border-alt: none; font-size: 15px;" target="_blank" rel="noopener"> <span style="display: block; padding: 10px 20px; line-height: 120%;"><span style="line-height: 18px;">Call to Action</span></span> </a> <!-- [if mso]></center></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>

Posted by: coothead Jun 13 2023, 12:58 PM

QUOTE(AAG1991 @ Jun 13 2023, 06:36 PM)

. Can you assist in making the button clickable and go to a website?

I will refrain from making any comments about your code
but just point out that to make the a element cliickable
requires the addition of an attribute similar to this..

CODE

href="https://example.com"

coothead

Posted by: AAG1991 Jun 13 2023, 01:01 PM

Thanks for the post. I have used href= before; just not sure where to place it in this section of code.

Posted by: coothead Jun 13 2023, 02:05 PM

QUOTE(AAG1991 @ Jun 13 2023, 07:01 PM)

. Thanks for the post. I have used href= before; just
. not sure where to place it in this section of code.

Assuming that you are coding for an email, then this would suffice..

CODE

<table width="100%">
<tbody>
  <tr>
   <td align="center">
    <a href="https://www.example.com"
     style="display: inline-block;
            padding: 10px 20px;
            margin: 10px;
            border-radius: 4px;
            line-height: 18px;
            background-color: #253e85;
            font-family: arial,helvetica,sans-serif;
            font-size: 15px;
            color: #fff;
            text-decoration: none"
      target="_blank">Call to Action
    </a>
   </td>
  </tr>
</tbody>
</table>

coothead

Posted by: AAG1991 Jun 13 2023, 02:16 PM

Excellent! Thank you so much!

Posted by: coothead Jun 13 2023, 02:19 PM

No problem, you're very welcome.

coothead

Posted by: Christian J Jun 13 2023, 06:03 PM

It seems to have been made with a MS Office program, resulting in lots of proprietary/unnecessary code. If possible, it's better to avoid using Office programs for HTML code.

Posted by: pandy Jun 14 2023, 03:17 AM

A funny thing about Office HTML. It's meant to cater to IE, but more often than not IE is the browser it doesn't work in...

And IE is pretty much dead now which adds to the pointlessness.

Posted by: Jason Knight Jun 15 2023, 06:18 PM

Thus the table for nothing, static style in the markup, made up fairy tale "mso:" BS that has nothing to do with HTML, pixel metrics, and host of other "delta alpha foxtrot uniform quebec" that means the entire mess should be pitched in the trash.

The only thing you can learn from Microshaft is how NOT to use web technologies.

Posted by: Jason Knight Jun 15 2023, 06:26 PM

Just to show what we're all talking about in how bad Microsoft's markup is...

This is roughly ALL the markup you should have.

(replace the # above with the URI you want the <a>nchor to open. And it's an anchor, not a "button". <button> is a tag for scripting-only or form-only behaviors, something a CTA likely would not (and should not) be.

Don't sweat that too much, the jargon and terminology takes a lot of adjustment. It's just that if you don't know the right words, it makes it harder for the rest of us to help you. Sucks huh?

Microsofts incompetent nonsense has saddled you with a table for nothiing, style in the markup, and a whole host of other just plain garbage code. To the tune of 1456 characters of code doing 350 bytes job! That's over four times the code actually needed for such a simple centered anchor.

STYLE does not belong in your HTML. If anyone or anything is telling you to say what things look like in your markup in all but the rarest of corner cases? Be it style="", <style>, or even classes that say what style to use? They're talking out their arse.

The style belongs in an external file called a "stylesheet" which for this would go something like:



Note that by using REM it dynamically scales to the user preference so they don't have to zoom. Anyone telling you it's ok to design in pixels is equally full of manure.

Here's a pen showing that in action.

https://codepen.io/jason-knight/pen/eYQJXmz