Анимация кнопок при наведении CSS

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.

 

Кнопка как и в первом варианте, только с вертикально анимацией.

 

See the Pen jYYawv by webgrind (@webgrind) on CodePen.