Код HTML кнопки НАВЕРХ:
<html lang="ru"><!--html для русских-->
<head><!--метаданные страницы-->
<meta charset="utf-8"/><!--кодировка-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!--для IE правильный скрипт-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--предпочтения браузера-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--начальный масштаб для не адаптивных страниц-->
<META NAME="AUTHOR" CONTENT="Alexander Kosolapov">
<title>CSS кнопка с псевдо элементами</title>
<meta name="description" content="CSS кнопка с псевдо элементами" />
<meta name="keywords" content="кнопка наверх, buttons" />
<STYLE TYPE="text/css">
<!--
@page { margin: 0.5in }
P { margin-bottom: 0.08in; direction: ltr; widows: 2; orphans: 2 }
A:link { color: #0000ff; so-language: zxx }
-->
</STYLE>
<STYLE TYPE="text/css"><!--стиль страницы-->
.but{/*контейнер кнопки*/
height:60px;/*высота блока*/
width:150px;/*ширина блока*/
}
.but p{/*надпись*/
display:block;
}
.vira {/*кнопка*/
background-color:#6cf;/*цвет кнопки*/
background-image:linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);/*линейный градиент цвета кнопки*/
background-image:-o-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-moz-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-webkit-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-ms-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:khtml-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
border-radius:5px;/*радиус закругления кнопки*/
-webkit-box-shadow:inset 0px 1px 0px #0cc,0px 5px 0px 0px #088,0px 10px 5px #999;
-moz-box-shadow:inset 0px 1px 0px #0cc,0px 5px 0px 0px #088,0px 10px 5px #999;
color:#fff;/*цвет стрлки*/
font:caption bold 16px georgia;/*свойства шрифта*/
letter-spacing:2px;/*расстояние между символами*/
padding:10px 20px;/*внутренние отступы*/
padding-right:50px;/*внутренний отступ справа от стрелки*/
position:relative;/*позиция варьируется*/
-webkit-box-shadow:inset 0px 1px 0px #0cc,0px 5px 0px 0px #088,0px 10px 5px #999;
-moz-box-shadow:inset 0px 1px 0px #0cc,0px 5px 0px 0px #088,0px 10px 5px #999;
box-shadow:inset 0px 1px 0px #0cc,0px 5px 0px 0px #088,0px 10px 5px #999;/*внутренняя и 2 наружные тени бокса*/
text-decoration:none;/*отсутствует подчеркивание*/
}
.vira:active {/*кнопка активная*/
background-image:linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);/*линейный градиент цвета кнопки*/
background-image:-o-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-moz-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-webkit-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
background-image:-ms-linear-gradient(bottom,rgb(102,204,255)0%,rgb(51,204,204)100%);
-webkit-box-shadow:inset 0px 1px 0px #0bb,0px 2px 0px 0px #088,0px 5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #0bb,0px 2px 0px 0px #088,0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #0bb,0px 2px 0px 0px #088,0px 5px 3px #999;/*тени бокса кнопки*/
top:3px;/*отступ сверху*/
}
.vira::before {/*круглая кнопка стрелка*/
background-color:#099;/*фон кнопки*/
background-image:url(./img/sv.png);/*белая стрелка*/
background-repeat:no-repeat;/*картинка без повтора*/
background-position:center center;/*расположение стрелки по центру*/
border-radius:50%;/*круглая стала кнопка*/
-webkit-border-radius:50%;
-moz-border-radius:50%;
content:"";/*добавляется контент*/
height:20px;/*высота круглой кнопки*/
margin-top:-9px;/*внешний отступ сверху*/
position:absolute;/*позиция зависимая*/
right:10px;/*расположение справа*/
top:50%;/*расположение сверху*/
box-shadow:inset 0px 1px 0px #055,0px 1px 0px #6cf;/*тени бокса*/
-webkit-box-shadow:inset 0px 1px 0px #055,0px 1px 0px #6cf;
-moz-box-shadow:inset 0px 1px 0px #055,0px 1px 0px #6cf;
width:20px;/*ширина круглой кнопки*/
}
.vira:active::before {/*кнопка в нажатом состоянии*/
margin-top:-12px;/*отступ сверху*/
top:50%;/*расположение сверху*/
-webkit-box-shadow:inset 0px 1px 0px #6cf, 0px 3px 0px #066,0px 6px 3px #09c;
-moz-box-shadow:inset 0px 1px 0px #6cf, 0px 3px 0px #066,0px 6px 3px #09c;
box-shadow:inset 0px 1px 0px #6cf, 0px 3px 0px #066,0px 6px 3px #09c;/*тени бокса*/
}
</STYLE><!--/стиль страницы-->
</head>
<body>
<div class="but"><!--контейнер кнопки-->
<p><a class="vira" href="javascript:window.scrollTo(0,0);">НАВЕРХ</a></p>
</div>
</body>
</html>