Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to change border thickness of VML Buttons #86

Open
burdyga opened this issue Nov 27, 2020 · 1 comment
Open

How to change border thickness of VML Buttons #86

burdyga opened this issue Nov 27, 2020 · 1 comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@burdyga
Copy link

burdyga commented Nov 27, 2020

Everyones know the nice tool buttons.cm. This tool allows you to make styled buttons at Outlook App on Windows using VML code. But the problem is if you need to control border thickness, you can't and the border will be 1px weight.
I fount the solution for change border thickness:
Add the strokeweight="XXpx" for v:roundrect element.

For example:
image

Tested code

<div>
    <!--[if mso]>
	  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t" strokeweight="4px">
    <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" ></v:fill>
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
  </v:roundrect>
<![endif]-->
<a href="https://" style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:4px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a>
</div>

Testing results
image

Keep in mind
If you add\change strokeweight attribute, you need to change VML button width and height by adding 2x px of border weight.

@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Nov 28, 2020
@ThiesPublishing
Copy link

VML borders should use points not pixels, and Outlook's pixel to point conversion is 75% with a minimum 1pt. So if you wanted a 2px border, you'd use 2 x .75 = 1.5pt.

Using points also ensures the border will resize properly in Outlook 120DPI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Development

No branches or pull requests

3 participants