help: How to programmatically style a links in posts

Would it be possible to use CSS for what you’re trying to achieve? If you added a class to each of your <a> tags, you could then style them differently from normal links:

<a href="#" class="button">Button</a>

and the CSS would be something like:

.entry-content a.button {
    background-color: blue;
    border: 1px solid black;
    border-radius: 3px;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
}

.entry-content a.button:hover {
    background-color: green;
}

Hey stephencottontail, thanks for the suggestion.

Would I have to change the links manually for each existing post with that method? As in editing each post, or would that be a global change and every link would be a button?

If it helps to see the site; In a post on https://www.androidcruze.com you’ll see I have a “download from market” text link that are unique for each post. Below that is a global “find this and more on google play” button that is not unique for each post, so I could place that in functions.php to be shown on each post. I would like to have the “download from market” as a button. Only have to run a “convert txt link to button function” once as all new posts will be buttons with the shortcode calls anyway. I really don’t want to manually change 300 odd posts to be a button if I can avoid it.

This is the code to style the button I am using (as suggested on another css help site):

/*GH Reference.  Added below for buttons*/
.action-button a:link, .action-button a:visited {
       border-radius: 5px;
       display: inline-block;
       font: 700 16px Arial, Sans-Serif;
       margin: 0 20px 10px 0;
       -moz-border-radius: 5px;
       padding: 8px 8px;
       text-align: center;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,0.3);
       text-transform: uppercase;
       -webkit-border-radius: 5px;
}

.action-button .subtitle {
       display: block;
       font: 400 11px Arial, Sans-Serif;
       margin: 5px 0 0;
}

.blue-button a:link, .blue-button a:visited {
       background-color: #5E9CB9;
       background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}

.blue-button a:hover {
       background-color: #68A9C8;
       background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
       color: #FFF;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}

rather than manually going through each post and changing the link to run a button shortcode to style the link.

You could do a search and replace directly in MySQL (***), done in multiple steps. Assuming that the current HTML and the Shortcode will have a common URL in the middle (that will not change) which per your example is:

https://www.google.com/page1

Then you do a search and replace and replace the HTML prior to that with the shortcode text that is prior and then the HTML after also.

So:

<span style="color: #0000ff;"><a id="

is replaced with:

[action-button color="blue" title=Goto Google" subtitle="" url="

and then:

" style="color: #0000ff;" target="_blank" rel="nofollow"></a>Goto Google</span>

is replaced with:

"]

Assuming that the HTML being replaced is not used except where we need to replace it (first do a Search in MySQL), this should work.

*** Please make very sure you have a full and proper database backup prior to any direct edits in MySQL. ***

thanks pwd.

yes thought bout the db (mentioned that in my first post). I would just do it as a sql update query rather than search and replace, but I was hoping someone may have already written a function to do something similar that I could just use in the functions.php without messing directly with the db ??