DEV Community

Cover image for #CodepenChallenge CSS Only "hologram" effect Button Icon
Takane Ichinose
Takane Ichinose

Posted on

#CodepenChallenge CSS Only "hologram" effect Button Icon

This is a no Javascript button; when you hover your mouse on the button, a 3D icon will appear, like hologram effect. The button may be rotated by moving the mouse pointer over the button.

I used the color scheme that was set on the challenge description.

There are:

  • #a5a7bb;

  • #a496a4;

  • #554d73;

But I cheated a little, because I used

lighten()

and

darken()

functions of Sass or SCSS to change the shade of the colors.

what's going on

I used a trick where I put a grid of blocks over the button, locate each blocks, then rotate the Home icon based on the position.

Below is the SCSS loop for it

$x-count: $width / $size;
$y-count: $height / $size;
$x-half: floor($x-count / 2);
$y-half: floor($y-count / 2);
$x-angle: 90 / $x-half;
$y-angle: 45 / $y-half;
$nth: 1;
@for $y from $y-count - 1 to -1 {
  @for $x from 0 to $x-count {
    $x-cnt: $x - $x-half;
    $y-cnt: $y - $y-half;
    $x-deg: $x-cnt * $x-angle;
    $y-deg: $y-cnt * $y-angle;
    &:nth-child(#{$nth}):hover {
      & ~ .icon-home {
        transform:
          scale(1)
          rotateX(#{$y-deg}deg)
          rotateY(#{$x-deg}deg);
      }
    }
    $nth: $nth + 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's only the important trick to make the rotation. The rest is, example, just make a 3D model of 'Home'. I used too many transforms to achieve the shape of the home.

Below is the actual live demo

Discussion (2)

Collapse
gkucmierz profile image
Grzegorz Kućmierz

Brilliant!

Collapse
takaneichinose profile image
Takane Ichinose Author

thank you! :)