Menu vertical survolé

727 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 November 2024

Curseur horizontal pur avec menu coulissant

26 June 2024

Bouton survolé

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>

Menu vertical survolé

Recommandé

Curseur horizontal pur avec menu coulissant

Lueur de survol du menu

Bouton survolé

HTML

CSS

JS

Recommandé

Curseur horizontal pur avec menu coulissant

Lueur de survol du menu

Bouton survolé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS