Newsletters: Style Links as Buttons

Style links as buttons in newsletters using the WordPress Newsletter plugin.

1. Add a Class to Links

You can add a CSS class to links by going into the “Text” mode of the editor and adding a class attribute with class name. Alternatively and more easily, use a plugin such as the TinyMCE Advanced plugin which gives you this functionality.

The result will be something like:

2. Create Button CSS

Now go ahead and design your button as you want it to look. This completely depends on how you want your buttons to look.

2015-05-18_12-35-02

Here is some sample CSS for a flat, blue button with rounded corners as shown above:

3. Add Button CSS to HEAD

Edit your newsletter template either in a text/code editor or under Newsletters > Templates in the WordPress Newsletter plugin.

2015-05-18_12-38-12

Add the CSS class and styles for the button the <style> tags in the <head> section accordingly.

4. Apply Inline Styles

So instead of applying inline styles on each link, you’ll just put the class newsletters_button on it and the CSS that you placed in the <style> tags in the <head> section in step #3 above will be applied automatically considering that you have the “Auto Inline Styles” turned on in the Newsletter plugin.

2015-05-18_12-39-18

You’ll find the setting under Newsletters > Configuration > General > Sending Settings in the WordPress Newsletter plugin. With the setting turned on, the plugin will take all <style> tags with their styles and apply it as inline CSS to the relevant classes/IDs upon sending the newsletter.

It gives you cross-client compatible emails, always!

CSS Classes of Predefined Links

The WordPress Newsletter plugin generates some links automatically in the templates, newsletters and from certain shortcodes.

All predefined links have the class newsletters_link on them by default. So you can style them in CSS using .newsletters_link.

Here is a list of the CSS classes on those links so that you can style them as needed.

Activation Link

Link generated by [wpmlactivate] has newsletters_activate class on it.

Resubscribe Link

Link generated by [newsletters_resubscribe] has newsletters_resubscribe class on it.

Unsubscribe Link

Link generated by [wpmlunsubscribe] has newsletters_unsubscribe class on it.

Management Link

Link generated by [wpmlmanage] has newsletters_manage on it.

Online Link

Link generated by [wpmlonline] has newsletters_online on it.

 

Shares

Web & Email Hosting

Get the best web & email hosting for speed, security and peace of mind. No restrictions, freedom to do what you need in order to run your business.

Host Now

Pin It on Pinterest

%d bloggers like this: