CSS предоставляет верстальщиками огромные возможности для создания анимации для кнопок. И к счастью для этого нужны лишь базовые знания и немного усердия. Ниже будут приведены кнопки с различной анимацией, которые вы сможете сразу же использовать на своем сайте.
Уже ни для кого не секрет, что на динамичном и интерактивном сайте пользователь проведет больше времени, а это немаловажный показатель сайта. Давайте рассмотрим интерактивные кнопки, которые взаимодействуют при наведении на них курсора мыши. За наведение курсора на объект отвечает псевдокласс :hover. В первом примере использованы псевдоэлементы :before и :after (:before — полоска сверху, а :after — снизу), изначально имеющие нулевую ширину width: 0. И при наведении курсора мыши на кнопку обоим псевдоэлементами присваивается ширина width: 100%. Для плавного изменения ширины полосок необходимо добавить свойство transition: all 0.25s ease-in-out.
See the Pen Анимация кнопки при наведении css by webgrind (@webgrind) on CodePen.
Ниже кнопка, теряющая объемность при наведении. Т.е. получается эффект нажатия. Также можно заменить псевдокласс :hover на :active и тогда анимация будет происходить при нажатии на кнопку.
See the Pen Анима by webgrind (@webgrind) on CodePen.
Простая, но красивая кнопка с плавным заполнением фона с прозрачного на цветной.
See the Pen EoovmW by webgrind (@webgrind) on CodePen.
Кнопка как и в первом варианте, только с вертикально анимацией.