» »

Стильная кнопка вверх на CSS для сайта

Стильная кнопка вверх на CSS для сайта

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

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

Красивая кнопка вверх с правой стороны сайта

Приступаем к установке:

Если у вас шрифтовые иконки подключены, то эти стили вам не нужно ставить. Но если нет, то выставляем их в Здесь стиль ставим на странице сайта. Что после установки, вы можете иконки и кнопки применять в стилистике интернет ресурса.

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


В низ сайта:

Здесь в начале кода находим класс "class="fa fa-angle-up" Что отвечает за палец вверх, но у вас есть возможность поменять, ссылку выше представил где найти.

Код
<script> function _goTop() { $('<span id="go-top" class="fa fa-hand-pointer-o" title="Вверх!"></span>').appendTo('body'); $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); $(window).scroll(function() { if ($(this).scrollTop() > 500) { $('#go-top').css({ 'opacity': '1', 'visibility': 'visible' }); } else { $('#go-top').css({ 'opacity': '0', 'visibility': 'hidden' }); } }); $('#go-top').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false }); }; _goTop(); </script>


Таблицы стилей CSS:

Код
#go-top {background-color: #90A4AE; display: block; position: fixed; bottom: 20px; right: 20px; z-index: 9999; color: #fff; line-height: 40px; height: 40px; width: 50px; text-align: center; font-size: 17px; cursor: pointer; transition: all .3s ease; border-radius: 70%; } #go-top:hover { background: #4CAF50; }


В стилях как раз все меняем и редактируем, это форма и оттенок цвета, также размер и положение, где кнопка находиться будет.
18.07.2017 Просмотров: 280 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
-SAM-
-SAM- 18.07.2017 21:501
0
А если у вас шрифтовые иконки не подключены, и их тут пишут подключать, чтобы только эту кнопку сделать - это делать нецелесообразно. Вот материал, что до этого писал, так просто картинкой сделано. Преимущество шрифтовых иконок тут только в том, что можно поменять быстро размер иконки, ибо используется векторная графика, а не растр.
Kosten
Kosten 19.07.2017 00:092
0
Потому и в описание пишу, что можно с подключением шрифтовых иконок, потом задействовать в дизайн сайта.
Scheme
Scheme 19.07.2017 00:403
-1
Здесь лучше в CSS поставить, как здесь под шрифты эти описано.
Kosten
Kosten 19.07.2017 01:394
-1
Можно в низ сайта поставить и также на все страницы также будет распространятся.
Kolinkor
Kolinkor 21.07.2017 20:105
0
Из за одной иконки стили ставить, но больше всего у многих они уже на сайте стоят.
avatar