Creating a Animated Hoverable Button Using HTML & CSS

Hello friend, I hope you are doing great. Today you will learn how to create an animated button using HTML and CSS. The interesting thing in this button is that the user selected button has some advanced features with beautiful UI and UX design.

Basic Style

Shape : The shape of this button is a slightly rounded rectangle, giving it a soft and modern look.
Color : This button uses vibrant gradients or soft, pastel solid colors (Ex:- shades of blue, purple, or green). It has a smooth background with slight shadowing to give a subtle 3D effect.
Text : The text on this button is bold and clear, usually in a contrasting color such as white, ensuring readability. Modern sans-serif fonts are used for aesthetics.

Hover Effects

Color Transition : When you move the mouse over the background, the color changes smoothly, brightening the existing shade (for example, from light blue to dark blue, or from blue to purple). This color change appears as if the button is being "activated."
Shadow Animation : A soft shadow can intensify or expand when hovered over, giving the button a raised, floating effect, as if it's ready to be clicked.
Text Color Change : In some cases, moving the mouse changes the background color of the text, such as from white to black, adding nice contrast with the new background.
Border Glow : When you hover over the mouse, a glowing border will appear, outlining the button in a bright, soft color that matches the design.

Output

Other Beautiful Navebar

/*Style the menu items */
   body {
   background: #161616 ;
   display: flex ;
   align-items: center ;
   justify-content: center ;
   min-height : 100vh ;
   width: 100% ;
    }
   .btn {
   margin: 100px ;
   border: none ;
   color: #fff ;
   cursor: pointer ;
   position: relative ;
   z-index: 0 ;
   font-size: 29px ;
    border-radius : 10px ;
    padding : 15px 38px ;
    box-shadow : 0 6px 20px rgba(0, 0, 0, 0.3) ;
   }
   .btn::after {
   content: '' ;
   z-index : -1 ;
   position : absolute ;
   width : 100% ;
   height : 100% ;
   background : #333 ;
   left : 0 ;
   top : 0 ;
   border-radius : 10px ;
   }
/* Change color */
   btn ::before {
   content: "" ;
   background : linear-gradient(45deg,#FF0000,#FF7300,#FFFB00,#48FF00,#00FFD5,#002BFF,#FF00CB,#FF0000) ;
   position : absolute ;
   left : -2px ;
   left : -2px ;
   background-size : 600% ;
   z-index : -1 ;
   width : calc(100% + 4px) ;
   height : calc(100% + 4px) ;
   filter : blur(8px) ;
   animation : glow 18s linear infinite ;
   transition : opacity 0.3s ease-in-out ;
   border-radius : 10px ;
   opacity : 0 ;
   }
   @keyframes glow {
   0% {
   background-position : 0 0 ;
   }
   50% {
   background-position : 100% 0 ;
    }
  }
/* Change color on hover */
   .btn :hover::before {
   opacity : 1 ;
   }
   .btn :active::before {
   background : transparent ;
   }
   .btn :active {
   background : transparent ;
   }

Creating a Animated Hoverable Button Using HTML & CSS

Basic Style

Hover Effects

Output

Other Beautiful Navebar

BrodSchool

Usefull link

Quick Link