वर्टिकल मेनू होवर

1198 ledoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

10 July 2025

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

13 June 2025

मानचित्र होवर प्रभाव

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>

वर्टिकल मेनू होवर

अनुशंसित

CSS एनिमेटेड बटन होवर प्रभाव

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

मानचित्र होवर प्रभाव

HTML

CSS

JS

अनुशंसित

CSS एनिमेटेड बटन होवर प्रभाव

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

मानचित्र होवर प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS