Thu. Nov 21st, 2024

sarveshpathak.com

Code Snippets, Tutorials, Articles, Technical Stuff

How to Create CSS Button with Hover Effect

1 min read
CSS Button with Hover Effect

CSS Button with Hover Effect


Here we will learn how to Create stylish
CSS Button with Hover Effect using easy CSS and HTML

HTML Code for CSS Button with Hover Effect

 <div class="container">
      <a href="#" class="btn">Hover me to show effect</a>
    </div>

CSS Code for CSS Button with Hover Effect

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
   background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(https://ask-me.in/wp-content/uploads/2019/05/code-coding-css-92905-e1559578232100.jpg)
      no-repeat center center/cover;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: #f4f4f4;
  text-transform: uppercase;
}

.btn {
  text-decoration: none;
  border: 1px solid rgb(146, 148, 248);
  position: relative;
  overflow: hidden;
}

.btn:hover {
  box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
}

.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(146, 148, 248, 0.4),
    transparent
  );
  transition: all 650ms;
}

.btn:hover:before {
  left: 100%;
}

Result : CSS Button with Hover Effect

Download Source Code

CSS Button with Hover Effect
How to Create CSS Button with Hover Effect

About Post Author