Menú vertical flotante

965 ledoc

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Menú contextual de vidrio de neón con selector de color

11 December 2024

Botón flotante

HTML

#v-menu ul {
    list-style: none;
    text-indent: 0px;
    padding: 0;
    margin: 0;
  }

#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
  }

#v-menu a {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 50px;
    color: #CCC;
    display: block;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background: #333;
    background-size: 200% 200%;
    text-shadow: 1px 1px 1px #111;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

#v-menu a:hover {
    background: linear-gradient(90deg, #ff7f50, #ff6347, #ffa07a, #f08080, #e9967a);
    background-size: 400% 400%;
    animation: gradientBG 2s infinite;
    color: #fff;
    box-shadow: 0px 0px 10px rgba(255, 99, 71, 0.8), 0px 0px 15px rgba(255, 99, 71, 0.8);
    transform: scale(1.05);
    border-radius: 4px;
  }

@keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }

50% {
      background-position: 100% 50%;
    }

100% {
      background-position: 0% 50%;
    }
  }

#v-menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-45deg);
    transition: 0.5s;
  }

#v-menu a:hover::before {
    left: 100%;
  }
</style>

Menú vertical flotante

Recomendado

Control deslizante flotante

Menú contextual de vidrio de neón con selector de color

Botón flotante

HTML

CSS

JS

Recomendado

Control deslizante flotante

Menú contextual de vidrio de neón con selector de color

Botón flotante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS