Alternativ hover på button

[lfbergee]

Det er grunner til å lage en mildere versjon av enkelte elementer for å roe ned fargebruke.

Forslag ved å bruke diamanten til å lage en mer spennede overgang som bruker diamanten, for å vise identiteten via det, isteden for fargen. Dette er nødvendigvis ikke en erstatning av dagens, men kan være i tillegg til.

AwesomeScreensho.2.mp4

[Slaine2]

Kul effekt, synes det passer bra! Er det også mulig det blir diamanten en rundere form? Kanskje du kunne teste effekten med andre farger?

[lfbergee]

Tror kanskje jeg har rota bort koden :p Men ja, er bare en rotert firkanta div, så hadde bare vært å satt border-radius for å mykt den opp.

Tanken bak den var som et alternativ til blå / grønn knapp som kan komme i konflikt med distrbutører, men jeg tenkte ikke noe mer på det enn det i fargevalget mitt, hele rgb skalaen er tilgjengelig, jeg skal ikke være en begresning :D

[Slaine2]

Før jeg bygger animasjonen i AE ... er det mulig å gjøre noe slikt? egentlig morphing en firkant i en knapp?

[lfbergee]

@piofinn mr css, har du noen ide? Sånn umiddelbart så ser jeg ikke noen måte å gjøre akkurat dette på en performant måte, men mulig det ikke er et stort problem for en såpass liten animasjon. Beforeelement med først border-radius-animasjon, så scale ?

[piofinn]

Hmmm.. Er i utgansgspunktet ikke noe problem å kjøre både border-radius og scale, men da vil det heller ikke se helt ut som i skissene til @Slaine2 . Hvis vi skal "morphe" mellom to former, som i skissen, må man nok fort gjøre noe litt mer avansert med en SVG og kanskje javascript-animasjon.

[lfbergee]

Tror vi skal unngå JS-animasjon på sånn komponent. Kan sikkert POCe med radius/scale.

Evt om vi kunne hatt to trekanter og en firkant i midten. Så kan trekantene animeres vekk fra hverandre og firkanten i midten vokse? Mulig det blir same same but different but still same.

[Slaine2]

Hvordan skal vi fortsette? Prøver du, @lfbergee Radius / Skala POCe eller tar det mye tid, eller skal jeg se etter et annet alternativ?