.btn {
        position: relative;	
        padding: 1.4rem 4.2rem;
        padding-right: 3.1rem;
        font-size: 1.4rem;
        color: var(--inv);
        letter-spacing: 1.1rem;
        text-transform: uppercase;
        transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
        cursor: pointer;
        user-select: none;
      }
      
      .btn:before, .btn:after {
        content: '';
        position: absolute;	
        transition: inherit;
        z-index: -1;
      }
      
      .btn:hover {
        color: var(--def);
        transition-delay: .5s;
      }
      
      .btn:hover:before {
        transition-delay: 0s;
      }
      
      .btn:hover:after {
        background: var(--inv);
        transition-delay: .35s;
      }
      
      .from-right:before,
      .from-right:after {
        top: 0;
        width: 0;
        height: 100%;
      }
      
      .from-right:before {
        left: 0;
        border: 1px solid var(--inv);
        border-left: 0;
        border-right: 0;	
      }
      
      .from-right:after {
        right: 0;
      }
      
      .from-right:hover:before,
      .from-right:hover:after {
        width: 100%;
      }
      
      

      Css language logo
      Fill from Right

      Fill-right
      Custom Buttons in CSS

      The code contains a .btn class which sets the position and size of the button, as well as some basic styling. It also sets up a transition which will occur when the button is hovered over or clicked. Finally, there are some from-right classes which sets the button's position and width to 0 when it's hovered from the right, and increases its width to 100% when it's hovered from the left.

      Shortcut: btn.hover7

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.