How to make a diagonal button fill when hovering?

To implement this effect, we need three elements:

1. Block with text
2. The block for the substrate with a gradient background of two colors
3. The block for the substrate in the form of a triangle at the junction of two colors

Consider the creation of the desired button in stages. Here it is in section, for clarity:

First we create the button itself:

 <div class="test">Все новости</div> 

And we stylize it:

 .test { border-radius: 30px; cursor: pointer; color: #fff; font-size: 13px; line-height: 35px; text-transform: uppercase; display: inline-block; padding-left: 30px; padding-right: 30px; /* Скрываем все, что за границами основного блока */ overflow: hidden; position: relative; } 

If you insert such a code on the website, neither the text, nor the button on the white background will be visible, since at this stage there is no background for the button.

Create a substrate:

 .test::before { /** * Двухцветная заливка от золотого к черному. * * Цвет определяется дважды, чтобы избежать эффекта градиента * * По умолчанию будет видна левая половина блока (золотая) * При наведении будет видна правая половина блока (черная) */ background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%); content: ''; position: absolute; top: 0; left: 0; /** * Подложка должна быть в два раза шире основного блока * * Это сделано для того, чтобы при наведении мы могли ее смещать, * имитируя эффект постепенной смены цвета */ width: 200%; height: 100%; /* Отрицательный z-index нужен для того, чтобы блок был под текстом */ z-index: -2; /* Здесь мы определяем скорость анимации заливки */ transition: .3s ease-in-out; } .test:hover::before { /* Смещаем блок с подложкой влево при наведении на основной блок */ margin-left: -100%; } 

It would be possible to dwell on this if the bevel were not needed.
You can make it with the help of the second substrate, which contains only a triangle of the desired color, which overlaps a part of the main substrate.

 .test::after { content: ''; /** * Создаем треугольник размерами чуть больше нашего блока * * Нужно организовать небольшое наслоение треугольника * на правую половину подложки с двухцветным фоном, * чтобы избежать проблемы с синхронизацией анимации смещения * блока с двухцветным фоном и этого треугольника */ width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent #111 transparent; /* Конец стилей треугольника */ position: absolute; /* Небольшое смещение для наложения на правую половину двухцветного фона */ right: -5px; top: -5px; /** * Отрицательный z-index нужен для того, чтобы блок был под текстом * В то же время, он должен быть больше, чем у блока с двухцветным фоном */ z-index: -1; /* Скорость анимации должна быть такой же, как и блока с двухцветным фоном */ transition: .3s ease-in-out; } .test:hover::after { /* Смещаем треугольник при наведении одновременно с основной подложкой */ right: 100%; } 

The entire button assembly:

 .test { border-radius: 30px; cursor: pointer; color: #fff; font-size: 13px; line-height: 35px; text-transform: uppercase; display: inline-block; padding-left: 30px; padding-right: 30px; overflow: hidden; position: relative; } .test::before { background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%); content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; z-index: -2; transition: .3s ease-in-out; } .test::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent #111 transparent; position: absolute; right: -5px; top: -5px; z-index: -1; transition: .3s ease-in-out; } .test:hover::before { margin-left: -100%; } .test:hover::after { right: 100%; } 

 <div class="test">Все новости</div> 

 div{ width:100px; height:30px; position:relative; background:#999; text-align:center; line-height:30px; color:#fff; } div:after{ content:''; -webkit-transition:.4s; } div:after{ content:''; display:block; width:0; height:0; position:absolute; left:50%; bottom:0; background:-webkit-linear-gradient(left,#fff,#ff0000,#fff); z-index:2; cursor:pointer; } div:hover:after{ content:"нажми"; width:100%; height:30px; top:0; left:0; } 

 <div> типа кнопка </div> 

you can hang the event js or jq on this button

 div{ width:300px; height:300px; background:#933300; position:relative; overflow:hidden; margin:auto; } div:after{ content:''; position:absolute; top:70%; left:70%; width:300px; height:300px; background:#660000; transform:rotate(45deg); transition:.4s; } div:hover:after{ transform:rotate(0); top:0; left:0; } 

 <div></div> 

second example