Editable HREF on styled A for a button

How can I add a pre-styled editable 'a' link to a button?

I have this so far:

<p style="font-size:1.6em; margin:0px; text-align:right;"><a style="text-transform:uppercase; color:#fff; text-decoration:none; background-color:#606163; padding:5px 15px; " href="#">read more ></a></p>

Stig Stig, 3 years ago

Hi drsolutions,

Styling a link with an editable HREF is indeed possible, but requires a bit of trickery. There are a few steps involved.

1. Give the <p> tag a class so you can target it (and the link inside it).

2. Move the CSS to a style tag.

3. Replace the <a> tag with a <singleline> tag.

<style type="text/css">
.readmore {font-size:1.6em; margin:0px; text-align:right;}
.readmore a {text-transform:uppercase; color:#fff; text-decoration:none; background-color:#606163; padding:5px 15px;}

<p class="readmore"><singleline label="Read more">read more</singleline></p>

That way, you'll be able to edit the link's text and URL, and it will be automatically styled as a button.

Could you give that a try and see if it works the way you had in mind?

The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free