Button Hover Effect

Button Hover Effect

HTML
<ul>
  <li class="yellow">
     <a>YELLLOW BUTTON</a>
  </li>
</ul>
CSS
ul{
    list-style: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%;
}

ul li {
    margin: 10px 0px;
}

ul li a{
    border-radius: 15px;
    display: block; 
    padding: 5px 0px;
    text-align: center;
    transition: all 0.5s ease-in;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 3px;
    cursor: pointer; 
}

.yellow a{
  border: 2px solid #e4ea8b;
  color: #e4ea8b;
}

.yellow a:hover {
    box-shadow: #e4ea8b -250px 0 0 2px inset;
}

DEMO

View Demo
588 Views
54700cookie-checkButton Hover Effect

Leave a Reply

Your email address will not be published. Required fields are marked *