Помогите улучшить кнопку "Наверх"

[Subcomandante.A]

Здравствуйте, друзья.

Задался вопросом создать кнопку "Наверх" на чистом CSS для сайта с черным фоном. Вот, что у меня получилось (по этой ссылке можно увидеть результат воочию), и дальше я зашел в тупик:

HTML

<div class="background">
    <div class="to_top">
        <div class="title"><a href="#">to top</a></div>
    </div>
</div>?

CSS

.background {
    background: black;
    height: 300px;
}

.to_top {
    display: table;
    position: relative;            
    width: 70px;
    height: 70px;
    background: #ffdd00;
    border: 1px solid #fff;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.to_top .title {
    display: table-cell;
    width: 69px;
    height: 69px;
    border: 1px solid #BFBFBF;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font: 18px bold sans-serif;
    text-align: center;
    vertical-align: middle;
}

.to_top .title a {
    display: block;
    color: #5c5c5c;
    text-decoration: none;
}

.to_top .title a:before{
    content: "";
    display: table-cell;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 15px;
    left: 25px;
    border-bottom: 10px solid #5c5c5c;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.to_top .title a:hover {
    color: #000000;
}

?

Подскажите, пожалуйста, как сделать:

• чтобы элемент а распространялся на весь блок, в котором располагается? Т.е. при наведении на круг пользователь автоматически наводил бы и на ссылку.
  
• чтобы при наведении на блок с классом "to_top", треугольник изменял цвет на черный?
  

Заранее спасибо, и если будут еще какие-либо советы, как улучшить кнопку - я буду рад их услышать ;]

[Avalon4eg]

<div class="background">


    <a href="#"> 
       <div class="to_top"> 
          <div class="title"><p>to top</p></div>  
       </div> 
    </a>


</div>

css

.background {
    background: black;
    height: 300px;
}

.to_top {
    display: table;
    position: relative;            
    width: 70px;
    height: 70px;
    background: #ffdd00;
    border: 1px solid #fff;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.to_top .title {
    display: table-cell;
    width: 69px;
    height: 69px;
    border: 1px solid #BFBFBF;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font: 18px bold sans-serif;
    text-align: center;
    vertical-align: middle;
}

a {
    display: block;
    color: #5c5c5c;
    text-decoration: none;
}

.to_top .title p:before{
    content: "";
    display: table-cell;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 15px;
    left: 25px;
    border-bottom: 10px solid #5c5c5c;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

 a:hover {
    color: #000000;
}
.to_top:hover .title p:before {

    border-bottom: 10px solid #000;

} 

Edited May 24, 2012 by Avalon4eg

[Subcomandante.A]

  On 5/24/2012 at 9:59 AM, Avalon4eg said:

css для изменения цвета треугольника

.to_top:hover .title a:before {

    border-bottom: 10px solid #000;

} 

Почти работает ;] Треугольник меняет цвет, но делает он это не одновременно со ссылкой, если, допустим, снизу курсор подвести. Думаю, вопрос решится, когда мы придадим ссылке размер дива.

[Sensei]

чтоб весь круг был ссылкой

.to_top .title a {
    width: 70px;
    height: 70px;
}

Правда текст съедит вверх, но можно поставить перед ним br будет по центру)

[Avalon4eg]

a .to_top:hover {
    color: #000000;
}

Edited May 24, 2012 by Avalon4eg

[Softlink]

http://jsfiddle.net/UZWsA/28/

[Subcomandante.A]

Спасибо всем за помощь!

Подсказали еще такой вариант: http://jsfiddle.net/6T82V/