.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-top:after {
        left: 0;
        height: 0;
        width: 100%;
      .from-top:before {
        bottom: 0;	
        border: 1px solid var(--inv);
        border-top: 0;
        border-bottom: 0;
      .from-top:after {
        top: 0;
        height: 0;
      .from-top:hover:after {
        height: 100%;

      Css language logo
      Fill from top

      Custom Buttons in CSS

      This code creates two buttons, one with a relative position and one with an absolute position. The relative position has top and left set to 0, while the absolute position has left and bottom set to 100%. The btn element also has a padding of 1.4rem and 4.2rem, along with a font-size of 1.4rem and letter-spacing of 1.1rem.

      The buttons have a color of var(--inv), a letter-spacing of 1.1rem, and a text-transform of uppercase. They also have a transition of all 500ms cubic-bezier(0.77, 0, 0.175, 1), and a cursor of pointer. Finally, they have a user-select property of none.

      Shortcut: btn.hover6


        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.