Hi!

I am not very skilled with CSS, but I run a website that gets a lot of traffic from facebook. I run WP on that site.

I have a "Share on Facebook" button at the moment, that I put at the start and end of an article.

This is the code I have right now:
In extra.css:

Code:
.button {
    width:100%;
    display:block;
    padding:10px;
    float:center;
    font-family:Lucida Grande, Tahoma !important;
    font-size:24px;
    text-align:center;
    text-decoration:none !important;
    color:#FFF !important;
    }
  
.facebook    { background:#3b5998; }  
.facebook:hover    { background:#5574cb; }
In single.php I put this code:

Code:
<p><center><div style="border:0px !important;">
<script type="text/javascript">// <![CDATA[
function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
// ]]></script><a class="button facebook" title="Klikk her for å dele dette på Facebook" onclick="return fbs_click()" href="http://www.facebook.com/share.php?u=<url>" target="_blank"><img src="/bilder/f-ico.png" style="vertical-align: text-top;">&nbsp; Del på Facebook</a>
</div><p></center>
And this is the result:
Bildr.no

However, I would love some changes, and this is where I need your help!!

I would like slightly rounded corners, facebook style. I would also like the button to be smaller, and then in the same div put in this code (its a Facebook "Like" button):
Code:
<div class="fb-like" data-href="http://facebook.com/sharemenorge" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
So this is how I want the result to be:
Bildr.no
A smaller button, with room for the like button as well. Plus rounded corners.

Can anyone help me?