Стрелки на CSS

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

Все варианты не используют графические иконки или шрифты

Вариант 1:

Стрелка с ховер-эффектом, которая подойдет для оформления кнопок "подробнее" или "далее", а также для построения последовательности, например: "Деньги -> Стулья -> Профит"

Вариант 2:

Большая стрелка для каких-нибудь информационных или графических блоков.

Вариант 3:

Стрелка на SVG для меню или кнопки "подробнее / далее"

Вариант 4:

Вариант стрелки для аккордиона или выпадающего блока (меняет направление по клику).

Требуется библиотека jQuery

Вариант 5:

Стрелки для оформления подсказок или каких-нибудь информационных блоков

Стрелка вверх
Стрелка вниз
Стрелка влево
Стрелка вправо

Вариант 6:

Стрелки на SVG для слайдера или карусели

Вариант 7:

Анимированная стрелка вниз

Вариант 8:

Еще один вариант анимированной стрелки вниз

Еще несколько вариантов стрелок можно найти в темах: Кнопка "вверх" и варианты ее оформления и Векторные стрелки на SVG

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • dr0sel:

    Здраствуйте. Можно узнать как второй вариант повернуть влево? Можно было бы сразу сделать в обе стороны в примерах?

    Ответить
  • Данил:

    и на северо запад

    Ответить
  • Данил:

    как повернуть стрелку на юзо запад в 1 варианте?

    Ответить
  • Вася:

    Как сделать стрелку более толстой в примере 1?

    Ответить
    • Alexander:

      height: 10px;
      И позиции подравнять потом

      Ответить
  • Игорь:

    Здравствуйте, возможно изменить цвет (Вариант 3) при наведении?

    Ответить
    • Alexander:

      Я вам больше скажу, изменить можно даже размер!

      Ответить
  • Лена:

    Здравствуйте, у меня стрелка 7 не анимированная получается и стоит слева.

    Ответить
    • Alexander:

      То что слева, это ее выравнять нужно как угодно родительским контейнером.
      А то что не анимированная, это какая то ошибка...

      Ответить
      • Лена:

        Спасибо за ответ) Разобралась. Все заработало. Спасибо)

        Ответить
  • Евгения:

    Здравствуйте. На тильде будет работать?

    Ответить
    • Alexander:

      Если там можно править HTML и CSS, то да

      Ответить
  • Мария:

    Здравствуйте, подскажите как поменять цвет стрелки ?

    Ответить
      • Lava_frai:

        Как можно изменить цвет стрелки из третьего примера?

        Ответить
  • Анатолий:

    Здравствуйте, подскажите пожалуйста как выравнить вариант 8 по центру блока, в css ишу margin: 30px auto; выравнивание есть, но всё равно небольшой сдвиг в право остаётся.
    Заранее большое спасибо

    Ответить
    • Анатолий:

      сдвиг в лево, а не вправо

      Ответить
      • Alexander:

        Подправил код, проверьте, остался ли сдвиг?

        Ответить
        • Анатолий:

          Теперь всё хорошо, спасибо большое !!!

          Ответить
  • Yakotlus:

    Хорошие примеры, спасибо. Но код стоит править. Много дублированных стилей, код можно написать гораздо короче и т.п. Oтрицательный delay…не стоит так делать.

    Ответить
    • Alexander:

      Отрицательный animation-delay допускается и полезный даже 🙂

      Ответить
  • Карим:

    Как сделать такую стреллку ссылкой?

    Ответить
  • Антон:

    Отличные эффекты, спасибо!

    Ответить
  • Ihar:

    Здравствуйте! Подскажите как сделать "Вариант - 8" чтобы она указывала в левую сторону?

    Ответить
    • Alexander:

      Поместите в контейнер

      <div class="arrow-wrap">
        <div class="arrow-8"></div>
      </div>

      CSS:

      .arrow-wrap {
        transform: rotate(90deg);
        display: inline-block;
      }
      Ответить