How to Customize Click to Tweet Links

April 15, 2015

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

How to customize Click to Tweet links with CSS

Yesterday I shared how to integrate Twitter into your website to encourage people to share your content. One of those ways was to include Click to Tweet links throughout your posts. However, right out of the box, Click to Tweet links are kind of boring. Not to mention that they don’t blend in with your theme.

Let’s change that. With a little CSS, you can quickly customize Click to Tweet links so they blend seamlessly with your site.

Customizing Click to Tweet links from the WordPress plugin

This is how Click to Tweet links look right out of the box when using the Click to Tweet WordPress plugin:

Click to Tweet WordPress plugin

Of course, some of the styling, such as on the actual links themselves, will be inherited from your theme’s stylesheet, so your actual results may vary.

Time to spice things up.

First let’s focus on the box, which can be customized via the tm-click-to-tweet class. We’re going to get rid of the border and give the box a background color.

.tm-click-to-tweet {
     background-color: #f5f5f5 !important;
     border: 0 !important;
}

Normally, you’d want to avoid using !important in your code, but since you’re overriding the plugin’s defaults, it’s a must in this case.

Here are the results:

Click to Tweet WordPress plugin

Now let’s customize the actual link itself. Let’s make it yellow, uppercase, size 18, and use the Google Font Montserrat. We’re also going to make the text black on hover.

.tm-click-to-tweet .tm-ctt-text a {
     color: #DDB16B !important;
     font-family: Montserrat !important;
     font-size: 18px !important;
     text-transform: uppercase !important;
}

.tm-click-to-tweet .tm-ctt-text a:hover {
     color: #000 !important;
}

To load Montserrat, you’ll need to add the following to the <HEAD> section of your theme:


The results:

Click to Tweet WordPress plugin

Better. Now let’s tackle the Click to Tweet logo. We’re going to change the color, align it to the left, and replace the bird with a different one, using Font Awesome. Oh and we’re also going to give it a hover state of black.

.tm-click-to-tweet a.tm-ctt-btn {
     background: none !important;
     color: #FD9789 !important;
     float: left !important;
     padding-right: 0 !important;
}

.tm-click-to-tweet a.tm-ctt-btn::before {
     content: '\f099';
     font-family: FontAwesome;
     font-size: 16px;
     margin-right: 7px;
}

.tm-click-to-tweet a.tm-ctt-btn:hover {
     color: #000 !important;
}

Notice how I didn’t have to include any !important declarations in .tm-click-to-tweet a.tm-ctt-btn::before. That’s because the plugin didn’t have attributes specified for the class, so there was nothing to override.

Then place the following code in the <HEAD> section of your theme:


Looking good, right?

Click to Tweet WordPress plugin

And that’s it! You can use your imagination and customize it further by changing the border radius of the box, increasing the letter spacing, or anything else you can think of.

Customizing Click to Tweet text based links

If you’re not on WordPress or you aren’t using the Click to Tweet plugin, you can still customize the link to your liking.

When you enter a link into the Click to Tweet website, you’ll be presented with a bit of code that looks like this:

Tweet: I am a test Tweet.

Which looks like this:

Click to Tweet

Since it’s a normal text link, it’s not going to stand out much. To customize it, we’re going to have to give it a custom class, which we’ll call ctt-link.

Tweet: I am a test Tweet.

I’m also going to get rid of the “Tweet:” text.

I am a test Tweet.

Okay, that’s better.

Now it’s time to give some attributes to the ctt-link class.

.ctt-link {
     color: #DDB16B;
     text-transform: uppercase;
}

.ctt-link::before {
     content: '\f099';
     font-family: FontAwesome;
     font-size: 16px;
     margin-right: 7px;
}

.ctt-link:hover {
     color: #000;
}

Remember to load Font Awesome and the Montserrat Google Font in the section of your theme:


What a difference, am I right?

Click to Tweet

If you want to give it a box, add a div to the link, like so:

And customize it:

.ctt-box {
     background-color: #f5f5f5;
     margin-bottom: 30px;
     padding: 15px;
}

The results:

Click to Tweet

And you’re done! Now you just have to remember to add the link class and the div class to each of your links and they’ll be displayed the same every time.

[Tweet “Want to customize your Click to Tweet links? Here’s how:”]

18 thoughts on “How to Customize Click to Tweet Links”

  1. Pingback: How to Increase Blog Post Shares on Twitter

  2. Wow–what a thorough and clear tutorial! I’ll be switching over to wordpress soon and will definitely be using your tutorial to spice things up 😉 (I’ve never tried a little tweet shout out, but like you said yesterday, they can really be effective.) alittleofalot.net

  3. This is awesome!! Thank you so much!
    I am actually using this to update the better click to tweet plugin (I like that one better because it allows the use of bit.ly shortlinks). but when I use this formating, the tweet text is not aligned left with the button like in your example. Any idea how I might fix that?

    1. Hmm, I’m not familiar with that plugin. I’m guessing that there’s another class involved. You could try using a Chrome / Firefox plugin called Firebug to help you figure out what class you need to target.

  4. Thank you for your post. I’m new to this, though have sorted my through code in the past. I understand your instructions for changing the look of the tweets, but not where I find the code in the first place. Can you direct me, please.

    1. No, it doesn’t work with any URL shorteners and there really isn’t any workaround as it automatically pulls the url from the post. However, Social Warfare has Click to Tweet functionality built in and they offer integration with Bitly. I’m not sure if it’s available on the free version or the pro version though, but it might be worth checking out if you’re looking for that functionality.

      1. Thanks Allyssa. I checked out Social Warfare yesterday but couldn’t determine if it offered the shortened URL even though it integrates with Bit.ly…. Will dig deeper.

        Cheers for replying so quickly 🙂

  5. Hi Allysa, thank you so much for this tutorial. I have the Better Click to Tweet plugin, and that works when you apply this code and just change the beginning code to .bctt-ctt-text. I’m just having this one little issue and I can’t seem to figure it out and am hoping you would be so kind and help me. I want my “click to tweet” text with the bird before it to show below the text, but it’s for some reason pushing the text to the right and it looks funky. I used the same css that you offer. Any ideas on how to remedy that? (thank you again!)

  6. I actually love you a little bit. Thanks so much! for a wordpress newbie I’m having to learn about css v quickly! I’m a graphic designer (print-based) so I’m very fussy about how things look but with no coding skills whatsoever articles like yours are a godsend!

    1. Just one little thing about the code itself, it didn’t work for me because the .tm-click-to-tweet bit you have on your demo didn’t seem to be recognised. When I went into inspect mode and copied what was there to .bctt-click-to-tweet it seemed to work. Maybe he’s updated the code or something since this post was written, or my computer is fussy/weird (equally likely)

      1. The code I had posted was for the original CTT plugin, which may or may not still be available (I haven’t checked in awhile). But the one you’re using is the Better Click to Tweet, which is a different plugin, but pretty much same functionality. That would explain the different classes 🙂

Leave a Comment

Your email address will not be published. Required fields are marked *