Adding Bullet proof buttons to an email

Marnee Beck

Hi,


I would like to use bullet proof images in an email. I have added the CSS below to the stationary:

.button {

    display: inline-block;

    text-align: center;

    vertical-align: middle;

    padding: 5px 10px;

    border: 1px solid #a12727;

    border-radius: 8px;

    background: #ff9900;

    background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ff9900));

    background: -moz-linear-gradient(top, #ff9900, #ff9900);

    background: linear-gradient(to bottom, #ff9900, #ff9900);

    text-shadow: #591717 1px 1px 1px;

    font: normal normal bold 15px arial;

    color: #ffffff;

    text-decoration: none;

}

.button:hover,

.button:focus {

    background: #ffb800;

    background: -webkit-gradient(linear, left top, left bottom, from(#ffb800), to(#ffb800));

    background: -moz-linear-gradient(top, #ffb800, #ffb800);

    background: linear-gradient(to bottom, #ffb800, #ffb800);

    color: #ffffff;

    text-decoration: none;

}

.button:active {

    background: #995c00;

    background: -webkit-gradient(linear, left top, left bottom, from(#995c00), to(#ff9900));

    background: -moz-linear-gradient(top, #995c00, #ff9900);

    background: linear-gradient(to bottom, #995c00, #ff9900);

}


The image shows up (but doesn't look great) in Outlook but is stripped out in Gmail (only the link shows up). How can I fix this issue? Is it even possible to use these buttons in Blackbaud?


Please advise as soon as possible.


Thanks!

Philip Nawrocki

Hi Marnee,


Check this link out: https://buttons.cm/


This is from Campaign Monitor, which has tons of great e-mail tricks and tips.


We use this and it works in Luminate.


Thanks,


Phil