Задать вопрос
provex
@provex
Front-end Developer
css

Как сделать такие кнопки?

Как сделать кнопку как на этом сайте, чтобы прям как на сайте взрывалась?

Our capabilities кнопка READ MORE.
  • Вопрос задан
  • 338 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 2
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
codepen.io/suez/pen/b7033b508fa221e1fbe4a9843a4a67fd
Если SASS непонятен, в css секции кликните кнопку View Compiled.
Я сделал не анкором, а button элементом. Суть кнопки простая - белый текст, синий бордер, прозрачный фон. С помощью :after делается фон, и при :hover этот :after анимирует scale() (выше 1.5) и изменение opacity до 0. Пилил на глаз, в их код не смотрел.
Ответ написан
Комментировать
Комментировать
viktorvsk
@viktorvsk
daneden.github.io/animate.css
buttons.css
css3 buttons
css buttons animation
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Добавить 2 индивидуальных блока на лендинг внутри сайта
18 окт. 2024, в 04:11
5000 руб./за проект
Разработка игрового бота-мотиватора для Telegram WebApp
18 окт. 2024, в 01:57
10000 руб./за проект
Лендинг на Тильде (Surway - опросы с помощью голосового сообщения)
18 окт. 2024, в 01:44
50000 руб./за проект
Ещё заказы