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, 4 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.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free