#CodepenChallenge CSS Only "hologram" effect Button Icon

#codepen #html #css #design

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;
  }
}

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