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

 

Основная часть контента и функциональности экспериментальная и мы поддерживаем только современные браузеры.

То, как мы реализовали морфинг кнопки, например, полноэкранное наложение, заключается в следующем: у нас есть главная обертка кнопки, которая содержит элемент кнопки и разделение для расширенного содержания. В то время как оболочка и кнопка элемента изначально видны, разделение для расширенного содержания появится только один раз- когда мы кликаем на кнопку. Это разделение имеет фиксированные позиционирование. Мы позиционируем ее поверх реальной кнопки, делая вид, будто сама кнопка отходит от своего контекста и создает эффект вылета информационного окна. 

Концепт морфизма кнопок на сайте с помощью CSS3 RUDEBOX

Концепт морфизма кнопок на сайте с помощью CSS3 RUDEBOX

В других примерах, мы проделываем немного другую работу для внутреннего содержания, как и масштабировать их вверх или сдвиньте их вниз. Еще дополнительный интересный пример, это переместить элемент с кнопки с расширением разделения и повторного использования его в качестве заголовка, как показано в примере-видеоплеер, как элемент управления. Для некоторых случаях он может не понадобиться, чтобы закрыть элемент.

Концепт морфизма кнопок на сайте с помощью CSS3 RUDEBOX

Морфинг элемент действия в реальной составляющей, что позволит выполнить действие, является интересной концепцией и, конечно, позволяет, во многих случаях, использовать разнообразные подходы. Существует что-то привлекательное в нем, но обратите внимание, что данные примеры только эксперимент.  Что вы думаете по этому поводу? Это интересная реализация элементов на сайте?

Концепт морфизма кнопок на сайте с помощью CSS3 RUDEBOX

Мы надеемся, что вам понравилась и вы вдохновитесь для создания новых элементов!

Читайте также: