need some help. please. themes, tumblr theme, easy for you. Difficult for me. Options

[bobsmokey]

I've been working on a tumblr theme.
This is how far I've come in two days.

http://damon-salvatores-butt.tumblr.com

So yeah, I need some help. How to make the links in the description as buttons. (http://hazythemes.tumblr.com/northwest)
I've found the CSS or something for it here: http://ianlunn.github.io/Hover/# (named outline outward. under "hover")

I can't move the buttons on my theme. If I change the float to center, the linsk will be underlined and fill the entire width.
I've tried changing everything.

This is how sidebar + sidebar.links looks like:

#sidebar {
background-color: white;
width: 100%;
Height: 160px;
position: fixed;
Bottom:0px;
border-top-style:outset;
}

#sidebar .title {
font-family: 'Great Vibes', cursive;
font-size: 80px;
text-align: center;
padding-bottom: 15px;
Color: #666d73;
line-height: 35%;
}

#sidebar .title a {
color: #666d73;
text-decoration: none;
}

#sidebar .title a:hover {
color: #ecf2f2;
}

#sidebar .description {
color: black;
font-size: 14px;
text-align:center;
padding:4px;
line-height:100%;
}

#sidebar .description a {
color: #666d73;
text-decoration: none;
}

#sidebar .description a:hover {
color: #666d73;
}
/*The Sidebar: Links*/

#sidebar .links {
background-color: #cfdbdb;
color: black;
font-size: 14px;
Width:140px;
Height: 50px;
Float:left;
text-align: center;
Margin: 7px; 2px;
Padding: 2px;
}

#sidebar .links a {
text-decoration:none;
}

#sidebar .links:hover {
background-color: #cfdbdb;
}

(further down, underneath body is this)

<div id="sidebar">
<div class="title"><a href="/">{Title}</a></div>
<img class="image" src="{image:Sidebar}" />
<div class="description">{Description}</div>

{block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}

---------------------------------------------------
Does anyone have any ideas? How to center them (as boxes, not massive lines from one side of the screen to the other) and how to add the hover effect? I've been working on this for two days... and I can't fix it!