Any CSS experts here?

Hello WordPressers,

I am completely new to creating themes and relatively new to CSS: I only know some basics.
However, I have a tweet button on my website and would like to use the same style of the button for the “Read more…”-text.
It works so far, however, the only thing that does not work is: The link is 100% in width and I don’t know how to make it shorter.

The index.php where the code is looks like this:
<?php the_content('<div class"weiterlesen"><div class="retweet"><span class="left"></span>Den ganzen Beitrag lesen »<span class="right"></span></div></div>'); ?>

The CSS looks like this:

.retweet { height: 16px; background: url('https://zulu.tweetmeme.com/b.gif') repeat-x 0px -100px; margin: 3px 3px 0px; display: block; cursor: pointer; padding: 0px 0px 0px; font-size: 11px; color: #FFF; text-decoration: none; line-height: 16px; position: relative; text-align: center;}
.retweet span { display: block; position: absolute; background:url('https://zulu.tweetmeme.com/b.gif') repeat-x; width: 3px; height: 16px; top: 0px; }
.retweet span.left { left: -3px; background-position: 0px -84px; }
.retweet span.right { right: -3px; background-position: 3px -84px; }

.retweet:hover, .retweet.selected { background-position: 0px -132px; color: #80b62a; }
.retweet:hover span.left, .retweet.selected span.left { background-position: 0px -116px; }
.retweet:hover span.right, .retweet.selected span.right { background-position: 3px -116px; }

.retweet a:link { color: #ffffff; font-weight:normal; text-decoration: none; }
.retweet a:visited { color: #ffffff; font-weight:normal; text-decoration: none; }
.retweet a:hover { color: #95cd3c; font-weight:normal; text-decoration: none; }
.retweet a:active { color: #95cd3c; font-weight:normal; text-decoration: none; }

Does anyone have an idea?