Skip to main content
removeu 77 caracteres do conteúdo
Fonte Link
MagicHat
  • 12,6mil
  • 7
  • 51
  • 97

Segue uma ideia aí pode adaptar:

 ul{
      float:left;
      list-style-type:none;
    }
    a*{
        text-decorationmargin:none;0;
    }
    .header{
        float: left;
        background-color: blue;
      height:auto;
  padding: 4px;16px;
    } 

li{
  font: 500 .header16px li{Poppins, sans-serif;
 
        width:auto;
        margin-right: 20px;
        text-alignheight:center;5px;
        floatdisplay:left; inline-block;
        line-height:0px;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-sizeattachment: 205% 100%;fixed;
        background-positionsize:left bottom;205% 100% ;
        transitionbackground-position:all 1s ease;;
    }
    .header litransition:hover{all 1s ease;
        backgroundlist-positionstyle-type:right bottom;none;
    }
    .header 
}
li a:hover{
       color:blue;
    }
    .header li background-position:right;}
a{
      text-decoration:none;
  color: white;
    }
  <div class="header">
      <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">sobre</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contato</a></li>
          <li><a href="#">suporte</a></li> 
 
      </ul>
    </div>

Segue uma ideia aí pode adaptar:

 ul{
      float:left;
      list-style-type:none;
    }
    a{
        text-decoration:none;
    }
    .header{
        float: left;
        background-color: blue;
        padding: 4px;
    }
    .header li{
        width:auto;
        margin-right: 20px;
        text-align:center;
        float:left;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-size: 205% 100%;
        background-position:left bottom;
        transition:all 1s ease;
    }
    .header li:hover{
        background-position:right bottom;
    }
    .header li a:hover{
       color:blue;
    }
    .header li a{
        color:white;
    }
  <div class="header">
      <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">sobre</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contato</a></li>
          <li><a href="#">suporte</a></li> 
 
      </ul>
    </div>

Segue uma ideia aí pode adaptar:

*{
  margin:0;
}
.header{
  float:left;
  background-color: blue;
  height:auto;
  padding:16px;
} 

li{
  font: 500 16px Poppins, sans-serif;
 
        width:auto;
        margin-right: 20px;
        height:5px;
        display: inline-block;
        line-height:0px;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-attachment: fixed;
        background-size: 205% 100% ;
        background-position:  ;
        transition:all 1s ease;
        list-style-type:none;
        
}
li:hover{
       
        background-position:right;}
a{
  text-decoration:none;
  color: white;
}
<div class="header">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">sobre</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contato</a></li>
    <li><a href="#">suporte</a></li> 
  </ul>
</div>

adicionou 231 caracteres ao conteúdo
Fonte Link
MagicHat
  • 12,6mil
  • 7
  • 51
  • 97

Segue uma ideia aí pode adaptar:

 ul{
      float:left;
      list-style-type:none;
    }
ul li   a{
        text-decoration:none;
    }
    .header{
        float: left;
    margin    background-rightcolor: 1px;blue;
        padding: 4px;
    }
    .header li{
        width:auto;
    padding    margin-right: 0;20px;
        text-align:center;
    float:left;
    backgroundfloat: transparent;left;
    /* Old browsers */
    background: linear-gradient(to left, blackwhite 50%, whiteblue 50%);
        background-size: 200%205% 100%;
        background-position:left bottom;
    margin-left:10px;
    transition:all 1s ease;
    }
    .header li:hover{
        background-position:right bottom;
    }
    .header li a:hover{
       color:white;blue;
    }
    .header li a{
        color:black;white;
    }
  <div class="header">
      <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">sobre</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contato</a></li>
          <li><a href="#">suporte</a></li> 

      </ul>
    </div>

Segue uma ideia aí pode adaptar:

ul{
    list-style-type:none;
}
ul li a{
    text-decoration:none;
}
.header{
    float: left;
    margin-right: 1px;
}
.header li{
    width:auto;
    padding: 0;
    text-align:center;
    float:left;
    background: transparent;
    /* Old browsers */
    background: linear-gradient(to left, black 50%, white 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 1s ease;
}
.header li:hover{
    background-position:right bottom;
}
.header li a:hover{
   color:white;
}
.header li a{
    color:black;
}
<div class="header">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">contato</a></li>
    </ul>
</div>

Segue uma ideia aí pode adaptar:

 ul{
      float:left;
      list-style-type:none;
    }
    a{
        text-decoration:none;
    }
    .header{
        float: left;
        background-color: blue;
        padding: 4px;
    }
    .header li{
        width:auto;
        margin-right: 20px;
        text-align:center;
        float:left;
        background: linear-gradient(to left, white 50%, blue 50%);
        background-size: 205% 100%;
        background-position:left bottom;
        transition:all 1s ease;
    }
    .header li:hover{
        background-position:right bottom;
    }
    .header li a:hover{
       color:blue;
    }
    .header li a{
        color:white;
    }
  <div class="header">
      <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">sobre</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">contato</a></li>
          <li><a href="#">suporte</a></li> 

      </ul>
    </div>

Fonte Link
MagicHat
  • 12,6mil
  • 7
  • 51
  • 97

Segue uma ideia aí pode adaptar:

ul{
    list-style-type:none;
}
ul li a{
    text-decoration:none;
}
.header{
    float: left;
    margin-right: 1px;
}
.header li{
    width:auto;
    padding: 0;
    text-align:center;
    float:left;
    background: transparent;
    /* Old browsers */
    background: linear-gradient(to left, black 50%, white 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 1s ease;
}
.header li:hover{
    background-position:right bottom;
}
.header li a:hover{
   color:white;
}
.header li a{
    color:black;
}
<div class="header">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">contato</a></li>
    </ul>
</div>