• CTRL ALT News
  • Posts
  • Create A SciFi BUTTON HOVER EFFECT For HTML/CSS (Beginners Guide)

Create A SciFi BUTTON HOVER EFFECT For HTML/CSS (Beginners Guide)

In this guide I will show you how to create the cool SciFi hover effect seen below, with only HTML and CSS. This guide is beginner friendly, and I will explain all the code.

Author

CTRL ALT News
December 16th, 2023

The Project

You can get the source code here.

Watch the video version here:

Getting an Image

The first thing we need to do is find an image. It is important that the image is black and white only, and preferably some sort of pattern. I will be using the image below for this project. You can download it by right-clicking and pressing “Save as”.

File Setup

We only need a single file (other than the image) for this project. Simply create a folder with any name of your liking. Inside the folder create a file called “index.html”, and also place the image inside the same folder.

The Code and Explanation

The code can be found below. All the code should be put inside the “index.html” file, an explanation for all the code will be below: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      position: relative;
      height: 500px;
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
    }

    .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      mix-blend-mode: screen;
    }

    button {
      position: absolute;
      z-index: 3;
      background-color: white;
      display: inline-block;
      padding: 8px 16px;
      height: 40px;
      font: 14px;
      color: #3b82f6;
      border: 1px solid transparent;
      font-weight: 500;
      transition: all .25s;
      overflow: hidden;
    }

    .overlay {
      position: relative;
      background-color: #3b82f6;
      border-radius: 9999px;
      filter: blur(15px);
    }

    button span {
      position: absolute;
      display: block;
    }

    button span:nth-child(1) {
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #3b82f6);
    }
    button:hover span:nth-child(1) {
      left: 100%;
      transition: 1s;
    }

    button span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #3b82f6);
    }
    button:hover span:nth-child(2) {
      top: 100%;
      transition: 1s;
      transition-delay: 0.25s;
    }

    button span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent, #3b82f6);
    }
    button:hover span:nth-child(3) {
      right: 100%;
      transition: 1s;
      transition-delay: .5s;
    }

    button span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg, transparent, #3b82f6);
    }
    button:hover span:nth-child(4) {
      bottom: 100%;
      transition: 1s;
      transition-delay: 0.75s;
    }
    
    button:hover {
      background-color: #3b82f6;
      box-shadow: 0 0 10px #3b82f6, 0 0 40px #3b82f6, 0 0 80px #3b82f6;
      color: white;
      transition-delay: 1s;
      cursor: pointer;
    }

    button:hover ~ .overlay {
      animation: expandOverlay .5s ease-in-out 1s forwards;
    }

    @keyframes expandOverlay {
      from {
        height: 0;
        width: 0;
      }
      to {
        height: 150px;
        width: 400px;
      }
    }

  </style>
</head>
<body>
  <div class="container">
    <button>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Hover Me!
    </button>
    <span class="overlay"></span>
    <img src="bg.jpg" alt="bg-image" class="bg-image">
  </div>
</body>
</html>

So how does this code work? Let’s start with the HTML.

  • “.container” is meant to keep the image, button, and overlay together in one piece.

  • The button is first of all the button, of course. Inside the button, we have four spans. These spans are the streaks that go around the button at the start of the animation.

  • “.overlay” is the blue color that expands as the animation continues.

  • The image is, of course, the image. This image will be invisible as a result of the way we mix the colors in the CSS using “mix-blend-mode”.

The CSS is where the magic happens. Therefore I will go over the most important parts of the CSS.

  • The button’s spans are individually styled using the span:nth-child selector. This selects the number X span inside the button. They are styled to be positioned in each corner of the button. Then, on hover, their height of width are set to 100, which will make them go to the other corner. The thing that ties it all together is the gradient placed on the spans. This gradient goes from blue to transparent.

  • The image is given a style of “mix-blend-mode: screen”. Because of the black-and-white coloring of the image, this makes the blue color of the overlay shine through.

  • The overlay initially has a size of 0 width and 0 height. On the buttons hover, we change the size of the overlay using the “expandOverlay” animation. We can select the overlay using the ~ selector.

Viewing the animation

You can view this button animation by opening the “index.html” file.