awesome button hover border effect

Learn Create Fancy Border Hover Effect By Kainat Ijaz Using Only HTML & CSS @informativeworld713. Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

Elevate Your Buttons: Creating a Fancy Border Hover Effect Using Only HTML & CSS

In the realm of web design, even the simplest of elements can be transformed into something captivating. Buttons, for instance, are an essential part of any website, serving as clickable elements that guide users to perform specific actions. By adding a fancy border hover effect to your buttons, you can amplify engagement and enhance the overall appearance of your website. In this article, we will explore a step-by-step guide to creating a button with a fancy border hover effect using only HTML and CSS.

Step 1: HTML Markup
To begin, we need to set up the HTML structure for our button. Let’s assume we want to create a button with the class name “fancy-border-button”. Here’s an example code snippet:

<button class="fancy-border-button">My Button</button>

Step 2: Basic CSS Styling
Now, we’ll add basic CSS styling to make our button visually appealing. Let’s define the base styles for our “fancy-border-button” class:

.fancy-border-button {
  border: none;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  border-radius: 10px;

Step 3: Creating the Fancy Border Effect
To achieve the fancy border hover effect, we’ll utilize CSS pseudo-elements and transitions. Add the following code to your CSS:

.fancy-border-button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  transition: all 0.3s;

.fancy-border-button::before {
  top: -5px;
  left: -5px;

.fancy-border-button::after {
  bottom: -5px;
  right: -5px;

.fancy-border-button:hover::after {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-color: #f39c12;

Step 4: Marveling at the Result
Now, when you hover over your fancy-border button, a beautiful border effect will be triggered. Experiment with different colors and dimensions to match your website’s design aesthetic.

With just a few lines of code, you can transform a regular button into something visually captivating. By utilizing the power of CSS pseudo-elements and transitions, incorporating a fancy border hover effect becomes seamlessly achievable. So, go ahead and elevate your website’s visual appeal by implementing this simple yet impactful feature!

Remember, this tutorial only scratches the surface of what can be achieved with HTML and CSS. The possibilities are endless, so don’t be afraid to experiment and let your creativity


Watch Our More Videos On YouTube

<button class="button">
  Hover Me
  <div class="button__horizontal"></div>
  <div class="button__vertical"></div>
body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: #222;
 .button {
   --offset: 10px;
   --border-size: 2px;
   display: block;
   position: relative;
   padding: 1.5em 3em;
   appearance: none;
   border: 0;
   background: transparent;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 0.25em;
   outline: none;
   cursor: pointer;
   font-weight: bold;
   border-radius: 0;
   box-shadow: inset 0 0 0 var(--border-size) currentcolor;
   transition: background 0.8s ease;
 .button:hover {
   background: rgba(100, 0, 0, 0.03);
 .button__horizontal, .button__vertical {
   position: absolute;
   top: var(--horizontal-offset, 0);
   right: var(--vertical-offset, 0);
   bottom: var(--horizontal-offset, 0);
   left: var(--vertical-offset, 0);
   transition: transform 0.8s ease;
   will-change: transform;
 .button__horizontal::before, .button__vertical::before {
   content: "";
   position: absolute;
   border: inherit;
 .button__horizontal {
   --vertical-offset: calc(var(--offset) * -1);
   border-top: var(--border-size) solid currentcolor;
   border-bottom: var(--border-size) solid currentcolor;
 .button__horizontal::before {
   top: calc(var(--vertical-offset) - var(--border-size));
   bottom: calc(var(--vertical-offset) - var(--border-size));
   left: calc(var(--vertical-offset) * -1);
   right: calc(var(--vertical-offset) * -1);
 .button:hover .button__horizontal {
   transform: scaleX(0);
 .button__vertical {
   --horizontal-offset: calc(var(--offset) * -1);
   border-left: var(--border-size) solid currentcolor;
   border-right: var(--border-size) solid currentcolor;
 .button__vertical::before {
   top: calc(var(--horizontal-offset) * -1);
   bottom: calc(var(--horizontal-offset) * -1);
   left: calc(var(--horizontal-offset) - var(--border-size));
   right: calc(var(--horizontal-offset) - var(--border-size));
 .button:hover .button__vertical {
   transform: scaleY(0);

Leave a Reply

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