Hover state symphony

Open In Editor Publish Your Code Need a Website?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }
  .animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #000;
  }

.box {
    width: 100px;
    height: 100px;
    background-color: #F06292;
    border-radius: 10px;
    position: relative; /* Para posicionar o pseudoelemento */
    margin: 20px;
    animation: hover-glow 0.5s linear infinite;
  }

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: scale(0.9); /* Redimensiona o pseudoelemento */
  }
  /*  */

@keyframes hover-glow {
    0% { 
      transform: translateY(0); 
      border-radius: 10px; 
    }
    100% { 
      transform: translateY(-10px); 
      border-radius: 0;   
    }
  }  
  
 /* Configurações de hover */ 
  .box:hover {
    background-color: #D81B60; /* Muda a cor no hover */ 
    transform: translateY(-2px); /* Tranform posição*/
    box-shadow: 0 4px 8px rgba(248, 98, 186, 0.8); /* Adiciona sombra */
  }

Hover state symphony

Recommended

Show text on hover

Hover slider

Button with animated Dracula hover effect

HTML

CSS

JS

Recommended

Show text on hover

Hover slider

Button with animated Dracula hover effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS