How to use your website 5 button style step by step.

Use these buttons for your website. And at the same time enjoy the beauty of your website. In the index.html file below, I’ve created the basic structure for a webpage and added a single button.

HTML Code Here:

<div class="middle">
  <a class="btn btn-1"  href="#">HOVER ME</a>
  <a class="btn btn-2"  href="#">HOVER ME</a>
  <a class="btn btn-3"  href="#">HOVER ME</a>
  <a class="btn btn-4"  href="#">HOVER ME</a>
</div>

CSS Code Here:

.middle {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.btn{
    position: relative;
    display: block;
    color: red;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin: 30px 0;
    border: 2px solid green;
    padding: 14px 60px;
    overflow: hidden;
    transition: 1s all ease;
}
.btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: green;
    z-index: -1;
    transition: 1s all ease;
}
.btn-1::before {
    width: 0;
    height: 100%;
}
.btn-1:hover::before {
    width: 200%;
}

.btn-2::before {
    width: 100%;
    height: 0%;
}
.btn-2:hover::before {
    height: 100%;
}
.btn-3::before {
    width: 100%;
    height: 0%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.btn-3:hover::before {
    height: 390%;
}
.btn-4::before {
    width: 100%;
    height: 0%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.btn-4:hover::before {
    height: 390%;
}

This button referral link:

https://codepen.io/kripashsarkar/pen/bGYBYog

Thank you for the read and use our article!

Leave a Reply

Your email address will not be published.