stylish hyperlink button with a unique hover effect, where a diagonal white bar appears to slide in from the left, covering the link's background color change.

1. Here are steps to create this animation effect:

1. Create HTML: Create an anchor (a) link for the button.

<a href="#"></a>

Now come to CSS and understand important properties that are needed to create beautiful effect:

1. Styling for Hyperlink/anchor (a ):

   • Here are some basic properties that are used. Understand the important one:
   • Makes the element an inline block, allowing it to flow inline with the text but have block-level properties.
   • Adds a white border with a thickness of 0.2 rem.
   • Defines padding of 1.5 rem (top and bottom) and 3 rem (left and right).
   • Positions the element relatively within its container.
   • Sets overflow to hidden, meaning any content that exceeds the defined size will be hidden.

a
 {
    background-color: rgb(51, 49, 49);
    font-size: 1.2rem;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    color: #eee;
    border: .2rem solid white;
    padding: 1.5rem 3rem;
    position: relative;
    overflow: hidden;
 }

1. Pseudo-Element (::before):

   • Creates a pseudo-element before the hyperlink content.
   • Sets its content to an empty string.
   • Positions it absolutely within the hyperlink container.
   • Covers the top 50% of the hyperlink.
   • Sets an initial opacity of 0.8.
   • Gives it a white background color.
   • Rotates it 45 degrees counterclockwise and shifts it to the left by 100% of its width.
   • Adds a transition effect that takes 1.2 seconds for smooth animations.

a::before
{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 50%;
    opacity: 0.8;
 z-index: 1;
    background-color: white;
    transform: translateX(-100%) rotate(45deg);
    transition: all 1.2s;
}

1. Hover Effects (a:hover and a:hover::before):

   • When the hyperlink is hovered over, it changes the background color to a bright red (hex color: #f83939).
   • Simultaneously, the pseudo-element (::before) is transformed. It's shifted to the right by 100% of its width and continues to be rotated at 45 degrees.
   • This transition gives the appearance of a diagonal bar sliding in from the left when the link is hovered over.

a:hover{background-color: #f83939;}
a:hover::before{
    transform: translateX(100%) rotate(45deg);


}  

that's it. we have created this beautiful engaging button effect.

See Demo: Codepen