Html стрелка к кнопке

Кнопка вверх для прокрутки страницы сайта в начало

Процесс создания кнопки вверх начнём с HTML-разметки:

В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :

.btn-up { /* фиксированное позиционирование */ position: fixed; /* цвет фона */ background-color: #673ab7; /* расстояние от правого края окна браузера */ right: 20px; /* расстояние от нижнего края окна браузера */ bottom: 0; /* скругление верхнего левого угла */ border-top-left-radius: 8px; /* скругление верхнего правого угла */ border-top-right-radius: 8px; /* вид курсора */ cursor: pointer; /* отображение элемента как flex */ display: flex; /* выравниваем элементы внутри элемента по центру вдоль поперечной оси */ align-items: center; /* выравниваем элементы внутри элемента по центру вдоль главной оси */ justify-content: center; /* ширина элемента */ width: 60px; /* высота элемента */ height: 50px; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть position: fixed . Для определение того, где должен располагаться элемент относительно краёв окна браузера, мы задаём следующие свойства: right: 20px и bottom: 0 .

Выравнивание псевдоэлемента ::before по центру внутри .btn-up выполним с помощью CSS Flexbox. Для этого .btn-up установим следующие свойства: display: flex , align-items: center и justify-content: center .

Шаг 2. Написание JavaScript кода

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

При нажатии на кнопку .btn-up будем прокручивать страницу к началу с анимацией.

Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:

const btnUp = { el: document.querySelector('.btn-up'), show() { // удалим у кнопки класс btn-up_hide this.el.classList.remove('btn-up_hide'); }, hide() { // добавим к кнопке класс btn-up_hide this.el.classList.add('btn-up_hide'); }, addEventListener() ); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { // переместим в начало страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:

Использование другого SVG-изображения

В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:

.btn-up { position: fixed; background-color: #673ab7; right: 20px; bottom: 20px; border-radius: 22px; cursor: pointer; width: 44px; height: 44px; } .btn-up::before { content: ""; text-align: center; position: absolute; width: 20px; height: 20px; left: 12px; top: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E"); }

Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:

Изменение цвета фона и других свойств кнопки

Для изменения цвета, размера, расположения и других свойств кнопки, необходимо просто отредактировать CSS правила, представленные выше.

Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :

Кнопка с плавным появлением и скрытием

Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.

Для этого в CSS необходимо внести следующие изменения:

.btn-up { position: fixed; /* фиксированная позиция */ background-color: #673ab7; /* цвет заднего фона */ right: 20px; /* расстояние от правого края */ bottom: 0px; /* расстояние от нижнего края */ border-top-left-radius: 8px; /* скругление верхнего левого угла */ border-top-right-radius: 8px; /* скругление верхнего правого угла */ cursor: pointer; /* форма курсора */ display: flex; /* не отображать элемент */ align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; width: 60px; height: 50px; opacity: 1; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

Также необходимо отредактировать JavaScript код, например, так:

const btnUp = { el: document.querySelector('.btn-up'), scrolling: false, show() { if (this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.remove('btn-up_hide'); this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.remove('btn-up_hiding'); }, 300); } }, hide() { if (!this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.add('btn-up_hide'); this.el.classList.remove('btn-up_hiding'); }, 300); } }, addEventListener()  // при прокрутке окна (window) window.addEventListener('scroll', () => { const scrollY = window.scrollY  this.scrolling = false; // если пользователь прокрутил страницу более чем на 200px if (scrollY > 400) { // сделаем кнопку .btn-up видимой this.show(); } else { // иначе скроем кнопку .btn-up this.hide(); } }); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { this.scrolling = true; this.hide(); // переместиться в верхнюю часть страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .

Выезжающая снизу кнопка вверх

В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега :

.btn-up { position: fixed; background-color: #f57c00; left: 20px; bottom: 30px; border-radius: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out; color: #fff; width: 50px; height: 50px; opacity: 1; transform: translateY(0); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; transform: translateY(100px); } .btn-up-icon { width: 40px; height: 40px; fill: currentcolor; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #ef6c00; } }

Источник

63 CSS Arrows

Collection of free HTML and CSS arrow code examples from Codepen, GitHub and other resources: animated, back to top, scroll down, simple and for boxes. Update of October 2021. 4 new items.

Table of Contents

Animated Arrows

Author

Links

Made with

About a code

Smooth Arrow Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

The Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flipping Arrows

Flipping arrows made with css-doodle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Awesome Arrow Icon

Animated awesome arrow icon with JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Dashed Animated Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Arrow @keyframes Animation

Using checkbox as the basis of the arrow state.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Arrow Animation Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Double Arrow Button

Animate an arrow button on click or hover.

Author

Links

Made with

About the code

Arrow animation

HTML and CSS arrow animation.

Author

Links

Made with

About the code

Arrow Animations

Sliding arrow css animations.

Author

Links

Made with

About the code

Arrow Hover Effect

Pure CSS arrow hover effect.

Author

Links

Made with

About the code

Animated CSS Arrows

Arrowed Link

Arrowed link — circle on hover (cf Google Home website).
Made by Alexandre Jolly
May 21, 2017

Triple Arrow Animation

SVG triple arrow animation.
Made by M-A Lavigne
May 5, 2017

Author

Links

Made with

About the code

Animated Arrow

Author

Links

Made with

About the code

Arrow animations

Some CSS only arrow animations that indicate state changes.

Author

Links

Made with

About the code

Animated Arrow Icon

Author

Links

Made with

About the code

Arrow animation

Author

Links

Made with

About the code

3 Arrows Animation

3 arrows animation with HTML, CSS and image.

Arrow Keyframes Animation

Arrow keyframes animation with HTML and CSS.
Made by Stephen Rodriguez
June 21, 2014

Arrow Icon Animation

Arrow icon animation with HTML and CSS.
Made by Bennett Feely
October 9, 2013

Author

Links

Made with

About a code

CSS Only Animated Arrow

Just example of making arrows only with CSS and animate it with CSS3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Arrows Back To Top

3 HTML and CSS arrow back to top code examples.

Author

Links

Made with

About the code

Simple CSS Arrow

Simple pure CSS arrow button.

HTML And CSS ‘Back To Top’ Arrows

Animated ‘back to top’ arrows.
Made by EricPorter
June 13, 2017

Author

Links

Made with

About the code

Up Arrow

Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.

Arrow Boxes

5 HTML and CSS arrow box code examples.

Author

Links

Made with

Источник

Кнопка стрелкой на CSS

Верстаю я тут как-то один сайт, и там дизайнер сделал кнопку в виде стрелочки, то есть слева бордер ровный, а справа должен быть треугольник, предающий кнопке направление. Я долго гуглил, но так и не нашел решения на эту тему. Кнопки есть какие угодно, но только не такие. Поэтому я использовал Bootstrap и какие-то мысли, которые нарыл в интернетах, и в итоге у меня получилась вот такая кнопка.

Так как не нашел подобного решения, решил поделиться им здесь, может кто-то сейчас ищет именно это.
Внутри описание.

Чаще всего я использую Twitter Bootstrap для сетки и кнопок, но кнопки часто кастомизирую на основе стандартных. И эта кнопка не исключение.

.btn-buy < display: block; color: #fff; border-radius: 0em; /* Обнулить округлости */ -moz-border-radius: 0em; /* Обнулить округлости */ -webkit-border-radius: 0em; /* Обнулить округлости */ background: #265d94; border: none; text-shadow: -1px -1px 0px rgba(0,0,0,.2); border-bottom: 2px solid #153a65; position: relative; margin: 0 auto; /* Это просто для выравнивания кнопки посередине */ >.btn-buy:after, .btn-buy:before < left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; >.btn-buy:after < border-color: rgba(136, 183, 213, 0); border-left-color: #265d94; border-width: 16px; margin-top: -16px; >.btn-buy:before < border-color: rgba(194, 225, 245, 0); border-left-color: #153a65; border-width: 16px; margin-top: -14px; >.btn-buy:hover, .btn-buy:focus, .btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < color: #fff; outline: none; background: #2e6eae; border-bottom: 2px solid #1b4a80; >.btn-buy:hover:after, .btn-buy:focus:after, .btn-buy:active:after, .btn-buy.active:after < border-left-color: #2e6eae; >.btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < background: #265d94; color: #fff; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; >.btn-buy:active:after, .btn-buy.active:after, .open .dropdown-toggle.btn-buy:after

Всё достаточно просто — к элементу кнопки я добавил псевдо–элемент с бордером, о котором прочитал здесь, спасибо alizar, и еще один псево–элемент, но ниже — для тени.

.btn-buy:after, .btn-buy:before < left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; >.btn-buy:after < border-color: rgba(136, 183, 213, 0); border-left-color: #265d94; border-width: 16px; margin-top: -16px; >.btn-buy:before

Ну а дальше всё стандартно, при наведении это

.btn-buy:hover, .btn-buy:focus, .btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < color: #fff; outline: none; background: #2e6eae; border-bottom: 2px solid #1b4a80; >.btn-buy:hover:after, .btn-buy:focus:after, .btn-buy:active:after, .btn-buy.active:after

.btn-buy:active, .btn-buy.active, .open .dropdown-toggle.btn-buy < background: #265d94; outline: none; color: #fff; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; >.btn-buy:active:after, .btn-buy.active:after, .open .dropdown-toggle.btn-buy:after

Был рад, если помог кому–нибудь, всем добра.

Источник