Please tell me how to do that when you hover on the button appeared the effect of brilliance. I thought that this can be achieved in this way.

a{ transition: all 1s ease 0s; } a:hover { background: linear-gradient(45deg, red, white); } <br>

Buttons are made in the form of a list with links (schematically below)

 <ul> <li> <a> Text</a> </li> </ul>

It turns out that the gradient is superimposed on the whole area at once, but the text goes with a delay (Which is not very pleasant :() Ideally, a narrow strip of the gradient would pass from the lower left to the upper right corners. Please help me. Any ideas are accepted!

    1 answer 1

    It is easy to googling on the Internet, for example, such buttons, it doesn’t matter whether it’s a link or a div, the link can also be applied to the block model: http://jsfiddle.net/jLhgve2j/

     /** * Icon */ .icon { position: relative; overflow: hidden; width: 50px; height: 50px; display: inline-block; margin: 25px 0 25px 25px; border-radius: 5px; color: #fff; text-decoration: none; text-align: center; line-height: 50px; font-size: 12px; font-family: sans-serif; } .icon:nth-child(1) { background: cornflowerblue; } .icon:nth-child(2) { background: salmon; } .icon:nth-child(3) { background: gray; } /** * The "shine" element */ .icon:after { content: ""; height: 200%; left: -230%; opacity: 0; position: absolute; top: -20%; transform: rotate(-30deg); width: 200%; background: rgba(255, 255, 255, 0.13); background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%); } /* Hover state - trigger effect */ .icon:hover:after { left: -50%; opacity: 1; top: -50%; transition-duration: 0.7s, 0.7s, 0.15s; transition-property: left, top, opacity; transition-timing-function: ease; } /* Active state */ .icon:active:after { opacity: 0; } 
     <a href="#" class="icon">let</a> <a href="#" class="icon">it</a> <a href="#" class="icon">shine</a>