<!-- Эффекты для кнопок в Tilda mo-ti.ru -->


  .line{
    border: none;
    position: relative;
    transition: 800ms ease all;
    outline: none;
       
   }
   
    .line:hover{
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    }
    
    .line:before,  .line:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: #fdd82a;
    transition: 400ms ease all;
}

   .line:after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}

    .line:hover:before, .line:hover:after {
    width: 100%;
    transition: 800ms ease all;
}
       
</style>