CODEWITHSUNDEEP
csstwitter
Tsundoku
Tsundoku

Reputation: 9418

How can I enlarge a twitter button?

I have the code from the developers site:

<div id="custom-tweet-button"><a target="_blank" class="twitter-share-button" href="https://twitter.com/share" data-text="Hey! 20% off!" data-count="none">Tweet to Friends</a></div>

but it's just ignoring the css I already tried to even place it inline but I can't. I googled for it but the best I found was on eHow.com and they just suggested to use another type of button. (I'm using the one without count)

Upvotes: 2

Views: 346

Answers (2)

Joel Eckroth
Joel Eckroth

Reputation: 2534

You can build your own Twitter Tweet button with CSS as explained here.

<style type="text/css" media="screen">
      #custom-tweet-button a {
        display: block;
        padding: 2px 5px 2px 20px;
        background: url('http://a4.twimg.com/images/favicon.ico') 1px center no-repeat;
        border: 1px solid #ccc;
      }
</style>

<div id="custom-tweet-button">  
      <a href="https://twitter.com/share?url=https%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a>
</div>

When using this method you have to use query string parameters to customize the Tweet Button's behavior as well as handle the popup of the Share Box.

Upvotes: 0

topherg
topherg

Reputation: 4303

I was thinking about this not too long ago, but with Google Plus. What I did was to look at the css that plus used, then created my own stylesheet (using the same rules) but with the !important tag to replace the original ones. This was successful with Google Plus (got a nice button that was 120x120px), so i'd imagine the same could be used for twitter.

When I was working out what needed to be done, I used chrome's inspect element to find what stylesheets were being used.

Upvotes: 2

Related Questions