Button not clickable Options

[AAG1991]

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>

This post has been edited by AAG1991: Jun 13 2023, 12:38 PM

[coothead]

. 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

[AAG1991]

. 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

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

[coothead]

. 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

This post has been edited by coothead: Jun 13 2023, 02:15 PM

[AAG1991]

. 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

Excellent! Thank you so much!

[coothead]

No problem, you're very welcome.

coothead

[Christian J]

I will refrain from making any comments about your code

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.

[pandy]

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.

[Jason Knight]

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.

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.

This post has been edited by Jason Knight: Jun 15 2023, 06:18 PM

[Jason Knight]

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.

CODE

<div class="callToActionLink">
    <a href="#">Call to Action</a>
</div>

(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:

CODE

.callToActionLink {
    text-align:center;
    padding:1rem;
    font-family:"open sans",arial,helvetica,sans-serif;
}

.callToActionLink a {
    display:inline-block;
    padding:0.5rem 1rem;
    text-decoration:none;
    background:#238;
    color:#FFF;
    border-radius:0.25rem;
}

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

This post has been edited by Jason Knight: Jun 15 2023, 06:34 PM