Email Button module loses styling when made dynamic

[Sheila_Baker]

We have an email with a number of modules using dynamic content. Everything is working..... except the button module. When we make the module dynamic, the visual button (ie backgrouns and styling) disappears and just the link itself remains. I have the module code below. We originally just tested using the Send Sample and selecting a segment. That email arrives in the inbox with the button styling just fine. However, when sending the email using a smart campaign and Send Email flow step to a person, the email  looses all button styling and just the link is there. I did try this with Litmus and it happens across all email clients. Any ideas why this is happening and what we can do about it? Would really like to make the button dynamic.

Thanks,

Sheila

<table class="mktoModule" mktoActive="true" mktoAddByDefault="true" id="Button" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Button">
<tr>
<td bgcolor="${Button-BgColor}" style="background-color:${Button-BgColor}">
<table class="inner_table" style="width:600px; margin: 0 auto; text-align: center; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<!--Extra space-->
<tbody>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="${Button-top-space}">&nbsp;</td>
</tr>
<!--CTA button-->
<tr>
<td valign="top">
<div class="mktoText" mktoName="Button" id="banner-button1">
<table style="margin: 0 auto; border-collapse: collapse;" width="${Button-Width}" align="${Button-Position}" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td style="background-color: ${Button-Color}; border:1px solid ${Button-Border};border-radius:${Button-Radius};font-family:${TextFontFamily}; font-size: 16px; mso-line-height-rule: exactly; line-height:22px ; text-align: center; vertical-align: middle; color: ${Button-Text-Color}; display: block; padding:9px 40px 8px;" valign="middle">
<a style="text-decoration: none; color: ${Button-Text-Color} !important;outline: none;" href="${Button-Link}">
<span style="color:${Button-Text-Color};">${Button-Text}</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td style="line-height: 1px; font-size: 1px;" height="${Button-bottom-space}">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--Button Module End-->

[Christiane_Rode]

Variable elements cannot be made dynamic. Here's some additional information.

My workaround (and I think this is similar to others, as well) is to build a one-cell table in a text module that has similar styling to the button module, and then text inside this area can be made dynamic.

[Sheila_Baker]

@Christiane_Rode Thank you!

[Sheila_Baker · Accepted solution]

Just wanted to complete this thread and close it out.  @Christiane_Rode's answer was the aha moment for me. The module that I posted can be made dynamic because it already has the <div> with mktotext. So to make this work, for each dynamic segment, I just replaced all of the variable references with the values to be used. And now the button is styled and workig just fine. Had totally forgotten that variables can't be used in dynamic content. In my case, it sort of worked... which made for more confusion.