Кнопки с находящиеся в боковой части сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Кнопки для сайта uCoz » Кнопки с находящиеся в боковой части сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Кнопки с находящиеся в боковой части сайта


Делаем кнопки сбоку сайта




Кнопок может быть любое количество,кнопки могут находиться в любом месте боковой части страницы.Цвет кнопок,размер текста и тип шрифта так же может быть любым.Кнопки могут работать на любой странице,то есть в каждом материале могут быть свои кнопки.Вам потребуется просто скопировать весь код в материал в режиме html редактора материала.




Подробнее о настройках

Положение кнопки

Положением кнопки от верхней части страницы управляет свойство top,значение может быть изменено на любое требуемое.При добавлении класса .dsrightbootton1,2,3...( в зависимости от количества кнопок ) Вам потребуется только заменить значение свойства top,чтобы кнопки находились на расстоянии друг от друга по высоте.



Размер кнопки

Если Вас не устраивает размер кнопки,его можно заменить в свойстве padding.В примерах применяется значение padding: 10px 15px 10px 40px; и padding: 10px 20px 10px 40px; для кнопок расположенных на правой стороне,на левой padding: 10px 40px 10px 15px; и padding: 10px 40px 10px 20px;.
Описание значений свойства padding:
Первое значение - расстояние от верхней части теста до верхнего края.
Второе значение - расстояние от правого края текста до правого края.
Третье значение - расстояние от нижнего края текста до нижнего края.
Четвёртое значение - расстояние от левого края текста до левого края.
Увеличивая размеры сторон Вы увеличиваете кнопку,уменьшая - уменьшаете.



Цвет фона кнопки

В примерах применяется белый цвет фона,регулируется он в свойстве background.Можете воспользоваться таблицей цветов скрипт которого можно установить на Ваш сайт.Применяемый тип цвета называется HEX и указывается в виде решотки и кода.



Цвет текста

В примерах применяется чёрный цвет текста,регулируется он в свойстве color.Можете воспользоваться таблицей цветов скрипт которого можно установить на Ваш сайт.Применяемый тип цвета называется HEX и указывается в виде решотки и кода.



Размер шрифта

Размером шрифта управляет свойство font-size,если Вас не устраивает его размер,можете изменить на требуемый.



Тип шрифта

Типом шрифта управляет свойство font-family,если Вас не устраивает применяемый тип,можете изменить на требуемый.



Чтобы кнопки были одинаковыми по размеру

Названия в кнопках могут быть разными по длинне и кнопки при этом получаются разными по выступающему размеру,чтобы кнопки были одинаковыми добавьте перед или после короткого названия символ пробела  .Сами определитесь в количестве добавляемых пробелов до получения адекватного вида.



Код для кнопки с правой стороны

<style>
a.dsrightbootton{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
font-family: 'Tahoma';
font-weight: 700;
color:#000;
padding: 10px 15px 10px 40px;
background:transparent;
border:1px solid transparent;
/* - Тени для кнопки -*/
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
/* - /Тени для кнопки -*/
display: block;
}
a.dsrightbootton:hover{
padding: 10px 20px 10px 40px;
text-decoration: none;
}
a.dsrightbootton1{
position: absolute;
text-decoration: none;
top: 130px; right: 0;
font-size: 16px;
font-family: 'Tahoma';
font-weight: 700;
color:#000;
padding: 10px 15px 10px 40px;
background:transparent;
border:1px solid transparent;
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
display: block;
}
a.dsrightbootton1:hover{
padding: 10px 20px 10px 40px;
text-decoration: none;
}
</style>
<a class="dsrightbootton" href="#">    В Х О Д</a>
<a class="dsrightbootton1" href="#">В Ы Х О Д</a>


Код для кнопки с левой стороны

<style>
a.dsleftbootton{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
font-family: 'Tahoma';
font-weight: 700;
color:#000;
padding: 10px 40px 10px 15px;
font-weight: 700;
background:#fff;
border:1px solid transparent;
/* - Тени для кнопки -*/
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
/* - /Тени для кнопки -*/
display: block;
}
a.dsleftbootton:hover{
padding: 10px 40px 10px 20px;
text-decoration: none;
}
a.dsleftbootton1{
position: absolute;
text-decoration: none;
top: 130px; left: 0;
font-size: 16px;
font-family: 'Tahoma';
font-weight: 700;
color:#000;
padding: 10px 40px 10px 15px;
font-weight: 700;
background:#fff;
border:1px solid transparent;
/* - Тени для кнопки -*/
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
/* - /Тени для кнопки -*/
display: block;
}
a.dsleftbootton1:hover{
padding: 10px 40px 10px 20px;
text-decoration: none;
}
</style>
<a class="dsleftbootton" href="#">    В Х О Д</a>
<a class="dsleftbootton1" href="#">В Ы Х О Д</a>

Проверить код кнопок на месте

Вставьте код в HTML редактор и проверьте.


    В Х О ДВ Ы Х О Д    В Х О ДВ Ы Х О Д






Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 4949 | Добавил: IZOTOP | Рейтинг: 5.0/2
    | Теги: кнопки с боку

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]