Создаем выпадающие кнопки с помощью CSS3В последнее время анимированные кнопки с помощью css стали вытеснять старые кнопки в виде простых изображений, это не удивительно, ведь новые технологии, да и привлекательная анимация позволят привлечь взор пользователя к необходимой информации. Зачастую на кнопке содержится малая доля информации, которая информирует нас о ее содержании, но иногда места на кнопке не достаточно, и хотелось добавить бы еще полезной информации, тогда следуют пойти на небольшую хитрость, и сделать выпадающею кнопку с дополнительной информацией.

В данном уроке мы рассмотрим как создать такую кнопку с помощью CSS3, которая будет реагировать на курсор мышки и нести дополнительную информацию в выпадающих блоках. И так, для начала рассмотрим простую разметку HTML:

Как вы заметили разметка элементарная, теперь перейдем к главной части урока, это создание стилей CSS:

Создаем выпадающие кнопки с помощью CSS3

В данных стилях мы рассмотрим, основные трансформации, и градиентные заливки:

Вот и все, все достаточно просто, тем не менее будет отлично дополнять Ваш сайт, и радовать взор посетителей.