вЭлементы дизайна Юкоз

Кнопка вверх в разных тонах ucoz

О скрипте:
Красивая подборка скриптов вверх сайта. Многие самые ходячие цвета. Это не все на сайте, на сайте большое количество шаблонов для сайта системы uCoz. Огромный архив скриптов, которые каждый день пополняются. Рабочий форум где вы для себя найдете что то новое и интересное. Так же на нем вам помогут если что то не понятно как по систем uCoz и компьютерная помощь. Если что то понравилось вы можете изложить все в гостевой книге и если не понравилось также можете там же изложить. Если обнаружите скрипт с багами просьба отписать в комментариях и мы исправим эту ошибку.
Приступаем к установке:
Устанавливать следует перед закрывающим тегом < .body>, в самый низ страницы

Code
<script type=»text/javascript» src=»http://zornet.ru/Zornet-2/top.js «></script>

2. Установка HTML
Обычная ссылка с классом, что прописан в js, вставляем в самый низ страницы.

Code
<a href=»#» class=»top_dm»>Наверх</a>

3. Установка CSS
Теперь выбирайте какой стиль прописать в CSS, то есть каким цветом.
Светлая кнопка наверх:

Code

/* Светлая кнопка наверх
——————————————*/
.top_dm
font: 11px Verdana,Arial,Helvetica, sans-serif;
color:#444;
text-shadow:0 1px 1px #fff;
cursor: pointer;
position:fixed;
bottom:-3px;
right:50px;
background:#D6D6D6;
margin: 0px;
padding:5px 10px 7px 10px;
border:1px solid #909090;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
.top_dm:hover
color:#444;
background:#EAEAEA

Синяя кнопка наверх:

Code

/* Синяя кнопка наверх
——————————————*/
.top_dm
font: 11px Verdana,Arial,Helvetica, sans-serif;
color:#0b3d7a;
text-shadow:0 1px 1px #fff;
cursor: pointer;
position:fixed;
bottom:-3px;
right:50px;
background:#7db1f8;
margin: 0px;
padding:5px 10px 7px 10px;
border:1px solid #0f76c5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
.top_dm:hover
color:#0b3d7a;
background:#9dc7ff

Красная кнопка наверх:

Code

/* Красная кнопка наверх
——————————————*/
.top_dm
font: 11px Verdana,Arial,Helvetica, sans-serif;
color:#7a0b0b;
text-shadow:0 1px 1px #fff;
cursor: pointer;
position:fixed;
bottom:-3px;
right:50px;
background:#f87d7d;
margin: 0px;
padding:5px 10px 7px 10px;
border:1px solid #c50f0f;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px
.top_dm:hover
color:#7a0b0b;
background:#ff9d9d

 

источник: zornet.ru

Похожие посты