Title: Emails: create button from shortcode
Last modified: May 9, 2022

---

# Emails: create button from shortcode

 *  Resolved [carryoncoding](https://wordpress.org/support/users/carryoncoding/)
 * (@carryoncoding)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/)
 * Hi,
    I want to use the default shortcodes for [comment_moderation_approve] and[
   comment_moderation_delete] to build suitable buttons.
 * By using View > message > raw source, we can see that the shortcodes expand to
   the following structure:
 * `<a href="url/wp-admin/comment.php?action=approve&c=78&_wpnonce=537a7ac370#wpbody-
   content">Approve</a><br />`
 * And for delete:
 * `<a href="url/wp-admin/comment.php?action=trash&c=78&_wpnonce=537a7ac370#wpbody-
   content">Delete</a><br />`
 * In [an earlier post](https://wordpress.org/support/topic/edit-user-activation-email/#post-12796126),
   you advised that it is possible to “style it into more of a button with HTML 
   and CSS”
 * Since the shortcode includes closure of the `<a> </a>` construct, please could
   you advise the best way to add CSS to achieve a button? I tried the following
   which naturally doesn’t work:
 * `[comment_moderation_approve] target="_blank" style="padding: 8px 12px; border:
   1px solid #738CA8; border-radius: 4px; font-family: Helvetica, Arial, sans-serif;
   font-size: 14px; color: #ffffff; text-decoration: none; font-weight:bold; display:
   inline-block;"/>Approve</a>`
 * Very many thanks,
    Phil.
    -  This topic was modified 4 years, 1 month ago by [carryoncoding](https://wordpress.org/support/users/carryoncoding/).

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Plugin Author [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * (@voltronik)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15627190)
 * Hi Phil,
    Thanks for your message.
 * You’ll most likely need to include a `<style></style>` HTML attribute towards
   the top of your email notification when using the Text part of the Editor on 
   your notification.
    Something like this inside may work:
 * `a[url^="url/wp-admin/comment.php?"] { /*button styles go here */ }`
 * Let me know if this helps.
 *  Thread Starter [carryoncoding](https://wordpress.org/support/users/carryoncoding/)
 * (@carryoncoding)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15633656)
 * Many thanks.
    I thought it wasn’t permitted to separate out the <style> definitions
   like this in emails, and it was necessary to use inline style definitions. I’ll
   give that a try. Cheers, Phil.
 *  Plugin Author [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * (@voltronik)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15634228)
 * Hi [@carryoncoding](https://wordpress.org/support/users/carryoncoding/),
    As 
   far as I know you can.
 * If it helps, this article may be useful as a guide: [https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/#inline-css-and-transform-html-emails](https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/#inline-css-and-transform-html-emails)
 *  Thread Starter [carryoncoding](https://wordpress.org/support/users/carryoncoding/)
 * (@carryoncoding)
 * [4 years ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15679766)
 * Hi, I’ve been trying to get this approach to work and still no joy. Have you 
   had any success elsewhere with styling the shortcode as a button? The idiosyncracies
   of the various email clients seem to play a factor.
 * Thanks for any help.
    Phil.
 *  Plugin Author [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * (@voltronik)
 * [4 years ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15680240)
 * Hi [@carryoncoding](https://wordpress.org/support/users/carryoncoding/),
    I can’t
   help with any specifics relating to customising the notifications using CSS however,
   you may find this article useful on what email clients support with regards to
   CSS: [https://www.campaignmonitor.com/css/style-element/style-in-body/](https://www.campaignmonitor.com/css/style-element/style-in-body/)
 * You may find this article helpful too: [https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/](https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/)
 *  Thread Starter [carryoncoding](https://wordpress.org/support/users/carryoncoding/)
 * (@carryoncoding)
 * [4 years ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15683132)
 * Very many thanks for these useful links.
    Phil
 *  Plugin Author [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * (@voltronik)
 * [4 years ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15683957)
 * No problem [@carryoncoding](https://wordpress.org/support/users/carryoncoding/),
   
   Hope you find an answer and get your notifications looking good 🙂
 *  Thread Starter [carryoncoding](https://wordpress.org/support/users/carryoncoding/)
 * (@carryoncoding)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15779077)
 * Hi,
    Thanks for all your help with this. I thought it might be useful for future
   readers to show how this was resolved. We spent quite some time trying to use
   the approach described above.
 *     ```
       include a <style></style> HTML attribute towards the top of your email notification when using the Text part of the Editor on your notification.
       Something like this inside may work:
   
       a[url^="url/wp-admin/comment.php?"] { /*button styles go here */ }
       ```
   
 * This is the most elegant approach, but sadly we were unable to get it to work.
   When the email is received, a number of clients fail to pick up on the a[…] in
   the style definition, and the buttons are not created.
 * Instead, we went with
 *     ```
               <style>
                   .email-button { 
                       padding: 8px 12px;
                       border: 1px solid #C2a332;
                       border-radius: 4px;
                       font-family: Helvetica, Arial, sans-serif;
                       font-size: 14px;
                       color: #C2a332;
                       text-decoration: none;
                       font-weight:bold;
                       display: inline-block;
                   }
                   table, td, div, h1, p {font-family: Arial, sans-serif;}
               </style>
       ```
   
 * Then in the body of the e-mail:
 *     ```
       <td style="width:33%;padding:0px 5px 10px 5px;vertical-align:top;">
         <div class="email-button">[comment_moderation_approve]</div>
        </td>
       ```
   
 * This expanded the shortcode and created the link in a button.
    Always happy to
   improve this further, so any suggestions for improvemet are welcome. Thanks, 
   Phil.
 *  Plugin Author [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * (@voltronik)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15780181)
 * Hi [@carryoncoding](https://wordpress.org/support/users/carryoncoding/),
    Thanks
   for sharing your solution. Glad you got it working.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Emails: create button from shortcode’ is closed to new replies.

 * ![](https://ps.w.org/bnfw/assets/icon.svg?rev=2531573)
 * [Customize WordPress Emails and Alerts - Better Notifications for WP](https://wordpress.org/plugins/bnfw/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/bnfw/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/bnfw/)
 * [Active Topics](https://wordpress.org/support/plugin/bnfw/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/bnfw/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/bnfw/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [Jack – BNFW](https://wordpress.org/support/users/voltronik/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/emails-create-button-from-shortcode/#post-15780181)
 * Status: resolved