Different hover Effects on buttons serve to grab the attention of users in order to induce them to take action. Today we will look at how to create an animated flare on hover over a button.

Button position on the screen

As always, let’s start by creating a container, where we will place our button. Please note that I am not using the tag button, and immediately register the link with the class button… In order to avoid unnecessary code (button + link) in HTML markup.

By default, the button is pressed to the upper left corner of the browser, to position it in the center of the screen, set the following CSS properties to the container.


.container {
    width: 100%; /* ширина на всю ширину браузера */
    height: 100vh; /* на всю высоту первого экрана */
    display: flex; /* делаем контейнер гибким */
    justify-content: center; /* по центру по горизонтали */
    align-items: center; /* вертикальное центрирование */
}


Button creation

Now using CSS styles, let’s create the button itself. We used an inline element to mark up the button. a and to be able to apply block-level CSS properties (indents, frames), we will display the button as an inline-block element.


button{
    display: inline-block;/* отображать как строчно-блочный элемент*/
    text-decoration: none;/* убираем дефолтное подчеркивание у ссылки*/
    font-family: 'Roboto Condensed';/*название шрифта*/
    text-transform: uppercase;/*трансформация в заглавные буквы */
    font-weight: 900;/*толщина шрифта*/
    color: #fff;/*цвет текста на кнопке*/
    font-size: 30px;/*размер шрифта*/
    background-color: darkred;/* цвет кнопки */
    padding: 20px 60px;/* расстояние от текста до края кнопки */
    position: relative;/* относительное позиционирование */
    border-radius: 10px;/* радиус скругления углов*/
    overflow: hidden;/* спрятать все лишнее за пределами кнопки*/
}


Flare CSS styling

To create a highlight, you do not need to create a new element, but use the pseudo-element before… Let’s overlay a semi-transparent pseudo-button on top with a width one third smaller than the original button.


button:before {
    content: ""; /* отображает псевдоэлемент */
    position: absolute; /* абсолютное позиционирование */
    top: 0; /* верхняя координата */
    left: 0; /* левая координата */
    width: 2em; /* относительная ширина */
    height: 100%; /* высота как у оригинала */
    background-color: rgba(255, 255, 255, 0.3); /* белый цвет с полупрозрачностью */
}


The lens flare has been created and now needs to be rotated diagonally. The properties are responsible for this: transform: skew… Rotate the highlight by -45 degrees.


transform: translateX(-0.5em) skewX(-45deg);


If we want the flare to appear on hover, then initially we need to hide it by changing the value of y translateX.


transform: translateX(-4em) skewX(-45deg);


Flare animation

Animation is created using a keyword @keyframes… Let’s come up with a name for the animation, let it be moveLight… To move the flare over the button from one point to another (from … to), it is enough to create two frames with different values ​​of y translateX… And the last thing is to hang the created animation on the pseudo-element before with an indication of the speed of the animation. The lower the number, the faster the highlight will flicker. When you hover over the button, the flare will slide along the entire length of the button.


.button:hover:before {
    animation: moveLight 0.5s;
}

Take a look at an example at CodePen