Inspiration for revealing content by morphing the action element.

Codrops

Last update: Aug 18, 2022

Related tags

Learning resource ButtonComponentMorph

Overview

Morphing Buttons Concept

Inspiration for revealing content by morphing the action element.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Comments

Login form

Login form wont submit user:pass to form unless firebug manually edits the html

opened by tjoozey 1
Created Bower Package
I've created a bower file so that the js modules and style sheets can be installed with

bower install [email protected]:FreakTheMighty/ButtonComponentMorph.git

I think you should put your name as author and change the homepage. I didn't want to do that on your behalf.
opened by FreakTheMighty 0

Close on typing

Hi,

my popup always closes when I start to type something into the form. I am using the fixed version and I can't figure out why it always closes.

Does someone have an idea?

Found the Problem :

document.onkeydown = function(evt) {
            evt = evt || window.event;
            if( self.options.closeEl !== '' ) {
                var closeEl = self.el.querySelector( self.options.closeEl );
                if( closeEl && self.expanded) {
                    self.toggle();
                }
            }
        };

This caused the closing.

opened by ixlipixli 0

Open href link

Hello,

This is great work ! I would like to use it, but I need to open an hrepf link with another page wit index3.html example.

Would that be possible ?

Any idea on how ?

Hoping for answers, Best regards, David

opened by ShapesGraphicStudio 0
Can't use more than one opening button using Morphing Button Concept

Hi there,

When I add more than just one morphing button the page only opens the first. What do I need to add to use 6 of these buttons with different content?

Thanks in advance!

opened by tijsluitse 2

Owner

Codrops

GitHub

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

3 May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

10 Aug 25, 2022

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

5 May 13, 2021

A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

6 Jun 2, 2022

A github action that provides detailed bundle analysis on PRs for next.js apps

Next.js Bundle Analysis Github Action Analyzes each PR's impact on your next.js app's bundle size and displays it using a comment. Optionally supports

369 Dec 27, 2022

A custom action for setting GitHub Workflow environment variables with YAML configuration files.

yaml-env-action - A custom action for setting GitHub Workflow environment variables with YAML configuration files. Introduction yaml-env-action is a c

3 Dec 13, 2022

Setup-graalvm - GitHub Action for setting up GraalVM CE.

GitHub Action for GraalVM This GitHub action sets up GraalVM Community Edition and GraalVM components such as Native Image and GraalVM languages. Key

105 Jan 2, 2023

A GitHub Action for pushing to a repo.

action-gh-push A GitHub Action for pushing to a repo. ?? Usage Below is a simple example of step.if tag gating name: ci on: push jobs: build:

6 Feb 15, 2022

🤖 An action that fetches the list of malicious domains on Discord in different providers and creates/updates a JSON file with them from time to time.

Discord Guardian Action ?? This action fetches the list of malicious domains on Discord in different providers and creates/updates a JSON file with t

7 Nov 30, 2022

Inspiration for revealing content by morphing the action element.

Related tags

Overview

Morphing Buttons Concept

Comments

Login form

Created Bower Package

Close on typing

Open href link

Can't use more than one opening button using Morphing Button Concept

Owner

Codrops

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

A JavaScript library to shuffle the text content of a DOM element with an animated effect.

A github action that provides detailed bundle analysis on PRs for next.js apps

A custom action for setting GitHub Workflow environment variables with YAML configuration files.

Setup-graalvm - GitHub Action for setting up GraalVM CE.

A GitHub Action for pushing to a repo.

🤖 An action that fetches the list of malicious domains on Discord in different providers and creates/updates a JSON file with them from time to time.

A GitHub Action to cache your workload to a Google Cloud Storage bucket.

🤖 GitHub Action which creates Issues from comments in your code

GitHub action to install Foundry

Github action to parse OWNERS files and outputs random reviewers

GitHub action code for VMware Image Builder (VIB).

⚙️ A GitHub Action to push a feed item to RSS3 network

Action to Mermaid

GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (istanbul)