.bordered-button

 
 
КНОПКА 1 Кнопка 2 Кнопка 3 
 

.bordered-button, то кнопка опускается в нижний левый угол, но в таком случае, если их 3 — они накладываются друг на друга с небольшим смещением. Как можно их раздвинуть между собой и разместить по центру в самом низу хидера?

Интересный проект по изучению английского:
Английский в формате путешествия по США
Последний раз редактировалось Dennis777; 27.02.2014 в 02:01 .

Кнопки вверх и вниз прокрутки страницы

Где в первом примере идет кнопка вниз, что с одной стороны оригинально, но это простая надпись, что можно прописать в дизайн сайта. Вторая аналогичной первой, только она уже будет поднимать страницу, так как также ее размещение идет в прописке, как пример footer на странице. Третий выстроен к стандартному виду, где появляется по правую сторону, и четвертый больше по дизайну схожий, как на сайте Vk.

Для скроллинга используется jQuery функция animate.

. animate(properties, duration, easing, complete);

Где идут обозначение на каждый функционал:

properties – свойства, которое задействует анимацию;
duration – значение по времени для анимации;
easing – вариант на анимацию, где задано по умолчанию swing, это замедление в самом начале и также при завершении, а вот linear идет на постоянную скорость;
complete – эта функция отвечает за вызов, что произойдет при завершение анимации.

Подключаем библиотеку на варианты:

Кнопка «Вниз»

Стационарная ссылка, которая находится по месту для прокрутки страницы в низ страницы.

.kontent_opisaniye <
width: 600px;
margin: 0 auto;
>
p <
color: #757070;
font-size: 16px;
line-height: 22px;
>
#sliding_down <
font-weight: 700;
>

На этом установка завершена.

Кнопка «Наверх»

Аналогичная ссылка в надписи для прокрутки снизу вверх.

.kontent_sayta <
width: 800px;
margin: 0 auto;
>
p <
color: #777575;
font-size: 16px;
line-height: 21px;
>
#podnyat_stranitsu <
font-weight: 900;
>

$(function() <
$(‘#podnyat_stranitsu’).click(function() <
$(‘html, body’).animate(, 600);
return false;
>);
>);

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

Плавающая кнопка по правую сторону

Здесь по дизайну идет кнопка, что при прокрутки вниз появиться в нижнем правом углу страницы.

#podnyatiye_kontenta <
display: none;
position: fixed;
bottom: 28px;
right: 28px;
z-index: 1000;
width: 31px;
height: 31px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/scroll_top.png) 50% 50% no-repeat;
border-radius: 50%;
opacity: 0.5;
>
#podnyatiye_kontenta:hover <
opacity: 1;
>

.opisaniye <
width: 600px;
margin: 0 auto;
>
p <
color: #7d7a7a;
font-size: 18px;
line-height: 23px;
>

$(function() <
$(window).scroll(function() <
if($(window).scrollTop() > 100) <
$(‘#podnyatiye_kontenta’).show();
> else <
$(‘#podnyatiye_kontenta’).hide();
>
>);

$(‘#podnyatiye_kontenta’).click(function() <
$(‘html, body’).animate(, 600);
return false;
>);
>);

Эта кнопка по функций идет с плавным поднятием страницы.

Панель с правой стороны

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

Наверх

/* Наверх */
#podnyatiye_opisaniya <
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 90px;
transition: background 0.2s ease;
display: block;
height: 100%;
text-align: center;
opacity: 0.5;
>
#podnyatiye_opisaniya span <
display: block;
width: 100%;
position: absolute;
left: 0;
top: 20px;
>
#podnyatiye_opisaniya:hover <
background: #d8d2d2;
opacity: 1;
>

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) <
#podnyatiye_opisaniya <
display: none;
>
>

.soderzhaniye_sayta <
width: 495px;
margin: 0 auto;
>
p <
color: #5d5858;
font-size: 17px;
line-height: 20px;
>

$(function() <
$(window).scroll(function() <
if($(window).scrollTop() > 100) <
$(‘#podnyatiye_opisaniya’).show();
> else <
$(‘#podnyatiye_opisaniya’).hide();
>
>);

$(‘#podnyatiye_opisaniya’).click(function() <
$(‘html, body’).animate(, 600);
return false;
>);
>);

Здесь основа создана стандартно по ширине, где в сером оттенке с эффектом наведении клика.

Кнопка с функциями вверх и вниз страницу

С таким функционалом можно реализовать кнопку на любом тематическом сайте, ведь по умолчанию она на половину прозрачна, пока не навели на основу курсор.

.podusan_kontent <
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 90px;
transition: background 0.2s ease;
>
.podusan_kontent:hover <
background: #eee;
>

/* Наверх */
#vedukas_klisan <
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
text-align: center;
opacity: 0.5;
transition: background 0.2s ease;
>
#vedukas_klisan span <
display: block;
width: 100%;
position: absolute;
left: 0;
top: 20px;
>
#vedukas_klisan:hover <
background: #ddd;
opacity: 1;
>

/* Вниз */
#knopka_vasumka <
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 50%;
left: 0;
text-align: center;
opacity: 0.5;
transition: background 0.2s ease;
>
#knopka_vasumka span <
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 20px;
>
#knopka_vasumka:hover <
background: #ddd;
opacity: 1;
>

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) <
.podusan_kontent <
display: none;
>
>

.stateyn_kontent <
width: 500px;
margin: 0 auto;
>
p <
color: #525050;
font-size: 15px;
line-height: 22px;
>

$(function() <
$(‘#vedukas_klisan’).click(function() <
$(‘html, body’).animate(, 600);
return false;
>);

Если вам нравится стиль функций поднятие страницы, как вконтакте, то здесь вы также можете опустить страницу к низу, и также поднять, где панель расположена с правой стороны.

Как опустить кнопку вниз блока?

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100px. У меня не получается это сделать, пробовал через position:absolute; не получается. Делать через margin-top не хочу тк. с изменением размера экрана кнопка будет сьезжать. Помогите пожалуйста.

header < background: url(../img/background-image.png) no-repeat; background-size: 100% 100%; height: 100vh; >.header < padding-top:50px; >.logo < font-size: 25px; font-weight: 800; color: #fff; font-family: 'BIG JOHN'; letter-spacing: 0.13em; >.logo:hover < cursor: pointer; >.menu a < margin-left: 7px; font-size: 16px; color:#fff; font-family: 'Open Sans'; padding: 7px 9px; border: 2px solid transparent; transition: 0.3s; >.menu a:hover < border: 2px solid #fff; border-radius: 100px; color:#fff; text-decoration: none; transition: 1s ease; >.title h1 < margin-top:35%; color:#fff; font-weight: 300; >.title p < padding-top: 30px; color:#fff; >.scroll < >.scroll img < display: block; transition: 0.5s ease; >.scroll img:hover

 
 
 
 
BOUNCY
 
Hello About Services Portfolio Team Blog Contact 
 
 
 
 
We Are Code Cafe
 
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 
 
 
 
 
 
 
 
 
 

Как спозиционировать кнопку?

Что пробовал
Вариант1 — не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header

Вариант 2 — кнопка внутри контейнера—row—col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)

Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили

&-wrap position: absolute padding-top: 800px right: 0 top: 0 &-social position: absolute right: 0 bottom: 0 justify-content: flex-end

Кнопку спозиционировать таким же способом как и кнопки соц сетей?

 
+38(095)668-55-55
Архитектура
Cпособ сделать жизнь лучше
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
КНОПКА

Кнопка имеет стиль описанный в варианте 2

/*HEADER*/ .header position: relative z-index: 5 height: 980px border: 5px solid red .button position: absolute bottom: 0 left: 0

Хочу кнопку опустить вниз как лучше сделать

• Вопрос задан более трёх лет назад
• 1774 просмотра

4 комментария

Простой 4 комментария