Кольцо + круг + ссылка

Пришлось изрядно повозиться для воплощения, казалось бы, простой идеи создания обычного круга на сайте. Кроме как через CSS компактного и универсального кода не получалось. Результатом решил поделиться и с вами. Получилось следующее:

<html>
<head>
<title>Circle</title>
</head>
<style>
.phases { width: 120px; height: 120px;}
.circle { width: 120px; height: 120px; border: 3px solid #ff0000; border-radius: 60px;
margin-bottom: 30px;}
a:hover .circle { width: 126px; height: 126px; border-radius: 60px; border: none;
background: #ff0000; margin-bottom: 12px;
background: -moz-linear-gradient(top, #ff0000 0%, #ff0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000),
color-stop(100%,#ff0000));
background: -webkit-linear-gradient(top, #ff0000 0%,#ff0000 100%);
background: -o-linear-gradient(top, #ff0000 0%,#ff0000 100%);
background: -ms-linear-gradient(top, #ff0000 0%,#ff0000 100%);
background: linear-gradient(to bottom, #ff0000 0%, #ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000',
endColorstr='#ff0000',GradientType=0 );}
</style>
<body>
<div class="phases">
<a href=""><div class="circle"></div></a>
</div>
</body>
</html>

Таким образом получаем кольцо + круг + ссылку красного цвета.

Эксперементируя с пиксельными данными порой получаются интересные эффекты. А поигравшись с цветом можно получить интересные и красочные переходы вплоть до радуги. Дерзайте!

Желаю удачи !