Как изменить цвет иконки при наведении css

SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more.

First off, let’s begin with a little abbreviated SVG markup:

<svg class="icon">
  <path .../>
</svg>

Target the .icon class in CSS and set the SVG fill property on the hover state to swap colors.

.icon:hover {
  fill: #DA4567;
}

This is by far the easiest way to apply a colored hover state to an SVG. Three lines of code!

SVGs can also be referenced using an <img> tag or as a background image. This allows the images to be cached and we can avoid bloating your HTML with chunks of SVG code. But the downside is a big one: we no longer have the ability to manipulate those properties using CSS. Whenever I come across non-inline icons, my first port of call is to inline them, but sometimes that’s not an option.

I was recently working on a project where the social icons were a component in a pattern library that everyone was happy with. In this case, the icons were being referenced from an <img> element. I was tasked with applying colored :focus and :hover styles, without adjusting the markup.

So, how do you go about adding a colored hover effect to an icon if it’s not an inline SVG?

CSS Filters

CSS filters allow us to apply a whole bunch of cool, Photoshop-esque effects right in the browser. Filters are applied to the element after the browser renders layout and initial paint, which means they fall back gracefully. They apply to the whole element, including children. Think of a filter as a lens laid over the top of the element it’s applied to.

These are the CSS filters available to us:

• brightness(<number-percentage>);
• contrast(<number-percentage>);
• grayscale(<number-percentage>);
• invert(<number-percentage>);
• opacity(<number-percentage>);
• saturate(<number-percentage>);
• sepia(<number-percentage>);
• hue-rotate(<angle>);
• blur(<length>);
• drop-shadow(<length><color>);

All filters take a value which can be changed to adjust the effect. In most cases, this value can be expressed in either a decimal or percent units (e.g. brightness(0.5) or brightness(50%)).

Straight out of the box, there’s no CSS filter that allows us to add our own specific color.
We have hue-rotate(), but that only adjusts an existing color; it doesn’t add a color, which is no good since we’re starting with a monochromatic icon.

The game-changing bit about CSS filters is that we don’t have to use them in isolation. Multiple filters can be applied to an element by space-separating the filter functions like this:

.icon:hover {
  filter: grayscale(100%) sepia(100%);
}

If one of the filter functions doesn’t exist, or has an incorrect value, the whole list is ignored and no filter will be applied to the element.

When applying multiple filter functions to an element, their order is important and will affect the final output. Each filter function will be applied to the result of the previous operation.

So, in order to colorize our icons, we have to find the right combination.

To make use of hue-rotate(), we need to start off with a colored icon. The sepia() filter is the only filter function that allows us to add a color, giving the filtered element a yellow-brown-y tinge, like an old photo.

The output color is dependent on the starting tonal value:

In order to add enough color with sepia(), we first need to use invert() to convert our icon to a medium grey:

.icon:hover {
  filter: invert(0.5)
}

We can then add the yellow/brown tone with sepia():

.icon:hover {
  filter: invert(0.5) sepia(1);
}

…then change the hue with hue-rotate():

.icon:hover {
  filter: invert(0.5) sepia(1) hue-rotate(200deg);                                  
}

Once we have the rough color we want, we can tweak it with saturation() and brightness():

.icon:hover {
  filter: 
    invert(0.5)
    sepia(1)
    hue-rotate(200deg)
    saturate(4)
    brightness(1);
}

I’ve made a little tool for this to make your life a little easier, as this is a pretty confusing process to guesstimate.

See the Pen CSS filter example by Cassie Evans (@cassie-codes)
on CodePen.

Even with the tool, it’s still a little fiddly, not supported by Internet Explorer, and most importantly, you’re unable to specify a precise color.

So, what do we do if we need a specific hex code?

SVG Filters

If we need more precise control (and better browser support) than CSS filters can offer, then it’s time to turn to SVG.

Filters originally came from SVG. In fact, under the hood, CSS filters are just shortcuts to SVG filters with a particular set of values baked in.

Unlike CSS, the filter isn’t predefined for us, so we have to create it. How do we do this?

This is the syntax to define a filter:

<svg xmlns="<http://www.w3.org/2000/svg>" version="1.1">
  <defs>
    <filter id="id-of-your-filter">
      ...          
      
      ...
    </filter>
    ...
  </defs>
</svg>

Filters are defined by a <filter> element, which goes inside the <defs> section of an SVG.

SVG filters can be applied to SVG content within the same SVG document. Or, the filter can be referenced and applied to HTML content elsewhere.

To apply an SVG filter to HTML content, we reference it the same way as a CSS filter: by using the url() filter function. The URL points to the ID of the SVG filter.

.icon:hover {
  filter: url('#id-of-your-filter');
}

The SVG filter can be placed inline in the document or the filter function can reference an external SVG. I prefer the latter route as it allows me to keep my SVG filters tidied away in an assets folder.

.icon:hover {
  filter: url('assets/your-SVG.svg#id-of-your-filter');
}

Back to the <filter> element itself.

<filter id="id-of-your-filter">
  ...          
  
  ...
</filter>

Right now, this filter is empty and won’t do anything as we haven’t defined a filter primitive. Filter primitives are what create the filter effects. There are a number of filter primitives available to us, including:

• [<feBlend>]
• [<feColorMatrix>]
• [<feComponentTransfer>]
• [<feComposite>]
• [<feConvolveMatrix>]
• [<feDiffuseLighting>]
• [<feDisplacementMap>]
• [<feDropShadow>]
• [<feFlood>]
• [<feGaussianBlur>]
• [<feImage>]
• [<feMerge>]
• [<feMorphology>]
• [<feOffset>]
• [<feSpecularLighting>]
• [<feTile>]
• [<feTurbulence>]

Just like with CSS filters, we can use them on their own or include multiple filter primitives in the <filter> tag for more interesting effects. If more than one filter primitive is used, then each operation will build on top of the previous one.

For our purposes we’re just going to use feColorMatrix, but if you want to know more about SVG filters, you can check out the specs on MDN or this (in progress, at the time of this writing) article series that Sara Soueidan has kicked off.

feColourMatrix allows us to change color values on a per-channel basis, much like channel mixing in Photoshop.

This is what the syntax looks like:

<svg xmlns="<http://www.w3.org/2000/svg>" version="1.1">
  <defs>
    <filter id="id-of-your-filter">
      <feColorMatrix
        color-interpolation-filters="sRGB"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0 "/>
    </filter>
    ...
  </defs>
</svg>

The color-interpolation-filters attribute specifies our color space. The default color space for filter effects is linearRGB, whereas in CSS, RGB colors are specified in the sRGB color space. It’s important that we set the value to sRGB in order for our colors to match up.

Let’s have a closer look at the color matrix values.

The first four columns represent the red, green and blue channels of color and the alpha (opacity) value. The rows contain the red, green, blue and alpha values in those channels.

The M column is a multiplier — we don’t need to change any of these values for our purposes here. The values for each color channel are represented as floating point numbers in the range 0 to 1.

We could write these values as a CSS RGBA color declaration like this:

The values for each color channel (red, green and blue) are stored as integers in the range 0 to 255. In computers, this is the range that one 8-bit byte can offer.

By dividing these color channel values by 255, the values can be represented as a floating point number which we can use in the feColorMatrix.

And, by doing this, we can create a color filter for any color with an RGB value!

Like teal, for example:

See the Pen
SVG filter – teal hover by Cassie Evans (@cassie-codes)
on CodePen.

This SVG filter will only impart color to icons with a white fill, so If we have an icon with a black fill, we can use invert() to convert it to white before applying the SVG filter.

.icon:hover {
  filter: invert(100%) url('assets/your-SVG.svg#id-of-your-filter');
}

If we just have a hex code, the math is a little trickier, although there are plenty of hex-to-RGBA converters out there. To help out, I’ve made a HEX to feColorMatrix converter.

See the Pen
HEX to feColorMatrix converterr by Cassie Evans (@cassie-codes)
on CodePen.

Have a play around, and happy filtering!

SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more.

First off, let’s begin with a little abbreviated SVG markup:

<svg class="icon">
  <path .../>
</svg>

Target the .icon class in CSS and set the SVG fill property on the hover state to swap colors.

.icon:hover {
  fill: #DA4567;
}

This is by far the easiest way to apply a colored hover state to an SVG. Three lines of code!

SVGs can also be referenced using an <img> tag or as a background image. This allows the images to be cached and we can avoid bloating your HTML with chunks of SVG code. But the downside is a big one: we no longer have the ability to manipulate those properties using CSS. Whenever I come across non-inline icons, my first port of call is to inline them, but sometimes that’s not an option.

I was recently working on a project where the social icons were a component in a pattern library that everyone was happy with. In this case, the icons were being referenced from an <img> element. I was tasked with applying colored :focus and :hover styles, without adjusting the markup.

So, how do you go about adding a colored hover effect to an icon if it’s not an inline SVG?

CSS Filters

CSS filters allow us to apply a whole bunch of cool, Photoshop-esque effects right in the browser. Filters are applied to the element after the browser renders layout and initial paint, which means they fall back gracefully. They apply to the whole element, including children. Think of a filter as a lens laid over the top of the element it’s applied to.

These are the CSS filters available to us:

• brightness(<number-percentage>);
• contrast(<number-percentage>);
• grayscale(<number-percentage>);
• invert(<number-percentage>);
• opacity(<number-percentage>);
• saturate(<number-percentage>);
• sepia(<number-percentage>);
• hue-rotate(<angle>);
• blur(<length>);
• drop-shadow(<length><color>);

All filters take a value which can be changed to adjust the effect. In most cases, this value can be expressed in either a decimal or percent units (e.g. brightness(0.5) or brightness(50%)).

Straight out of the box, there’s no CSS filter that allows us to add our own specific color.
We have hue-rotate(), but that only adjusts an existing color; it doesn’t add a color, which is no good since we’re starting with a monochromatic icon.

The game-changing bit about CSS filters is that we don’t have to use them in isolation. Multiple filters can be applied to an element by space-separating the filter functions like this:

.icon:hover {
  filter: grayscale(100%) sepia(100%);
}

If one of the filter functions doesn’t exist, or has an incorrect value, the whole list is ignored and no filter will be applied to the element.

When applying multiple filter functions to an element, their order is important and will affect the final output. Each filter function will be applied to the result of the previous operation.

So, in order to colorize our icons, we have to find the right combination.

To make use of hue-rotate(), we need to start off with a colored icon. The sepia() filter is the only filter function that allows us to add a color, giving the filtered element a yellow-brown-y tinge, like an old photo.

The output color is dependent on the starting tonal value:

In order to add enough color with sepia(), we first need to use invert() to convert our icon to a medium grey:

.icon:hover {
  filter: invert(0.5)
}

We can then add the yellow/brown tone with sepia():

.icon:hover {
  filter: invert(0.5) sepia(1);
}

…then change the hue with hue-rotate():

.icon:hover {
  filter: invert(0.5) sepia(1) hue-rotate(200deg);                                  
}

Once we have the rough color we want, we can tweak it with saturation() and brightness():

.icon:hover {
  filter: 
    invert(0.5)
    sepia(1)
    hue-rotate(200deg)
    saturate(4)
    brightness(1);
}

I’ve made a little tool for this to make your life a little easier, as this is a pretty confusing process to guesstimate.

See the Pen CSS filter example by Cassie Evans (@cassie-codes)
on CodePen.

Even with the tool, it’s still a little fiddly, not supported by Internet Explorer, and most importantly, you’re unable to specify a precise color.

So, what do we do if we need a specific hex code?

SVG Filters

If we need more precise control (and better browser support) than CSS filters can offer, then it’s time to turn to SVG.

Filters originally came from SVG. In fact, under the hood, CSS filters are just shortcuts to SVG filters with a particular set of values baked in.

Unlike CSS, the filter isn’t predefined for us, so we have to create it. How do we do this?

This is the syntax to define a filter:

<svg xmlns="<http://www.w3.org/2000/svg>" version="1.1">
  <defs>
    <filter id="id-of-your-filter">
      ...          
      
      ...
    </filter>
    ...
  </defs>
</svg>

Filters are defined by a <filter> element, which goes inside the <defs> section of an SVG.

SVG filters can be applied to SVG content within the same SVG document. Or, the filter can be referenced and applied to HTML content elsewhere.

To apply an SVG filter to HTML content, we reference it the same way as a CSS filter: by using the url() filter function. The URL points to the ID of the SVG filter.

.icon:hover {
  filter: url('#id-of-your-filter');
}

The SVG filter can be placed inline in the document or the filter function can reference an external SVG. I prefer the latter route as it allows me to keep my SVG filters tidied away in an assets folder.

.icon:hover {
  filter: url('assets/your-SVG.svg#id-of-your-filter');
}

Back to the <filter> element itself.

<filter id="id-of-your-filter">
  ...          
  
  ...
</filter>

Right now, this filter is empty and won’t do anything as we haven’t defined a filter primitive. Filter primitives are what create the filter effects. There are a number of filter primitives available to us, including:

• [<feBlend>]
• [<feColorMatrix>]
• [<feComponentTransfer>]
• [<feComposite>]
• [<feConvolveMatrix>]
• [<feDiffuseLighting>]
• [<feDisplacementMap>]
• [<feDropShadow>]
• [<feFlood>]
• [<feGaussianBlur>]
• [<feImage>]
• [<feMerge>]
• [<feMorphology>]
• [<feOffset>]
• [<feSpecularLighting>]
• [<feTile>]
• [<feTurbulence>]

Just like with CSS filters, we can use them on their own or include multiple filter primitives in the <filter> tag for more interesting effects. If more than one filter primitive is used, then each operation will build on top of the previous one.

For our purposes we’re just going to use feColorMatrix, but if you want to know more about SVG filters, you can check out the specs on MDN or this (in progress, at the time of this writing) article series that Sara Soueidan has kicked off.

feColourMatrix allows us to change color values on a per-channel basis, much like channel mixing in Photoshop.

This is what the syntax looks like:

<svg xmlns="<http://www.w3.org/2000/svg>" version="1.1">
  <defs>
    <filter id="id-of-your-filter">
      <feColorMatrix
        color-interpolation-filters="sRGB"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0 "/>
    </filter>
    ...
  </defs>
</svg>

The color-interpolation-filters attribute specifies our color space. The default color space for filter effects is linearRGB, whereas in CSS, RGB colors are specified in the sRGB color space. It’s important that we set the value to sRGB in order for our colors to match up.

Let’s have a closer look at the color matrix values.

The first four columns represent the red, green and blue channels of color and the alpha (opacity) value. The rows contain the red, green, blue and alpha values in those channels.

The M column is a multiplier — we don’t need to change any of these values for our purposes here. The values for each color channel are represented as floating point numbers in the range 0 to 1.

We could write these values as a CSS RGBA color declaration like this:

The values for each color channel (red, green and blue) are stored as integers in the range 0 to 255. In computers, this is the range that one 8-bit byte can offer.

By dividing these color channel values by 255, the values can be represented as a floating point number which we can use in the feColorMatrix.

And, by doing this, we can create a color filter for any color with an RGB value!

Like teal, for example:

See the Pen
SVG filter – teal hover by Cassie Evans (@cassie-codes)
on CodePen.

This SVG filter will only impart color to icons with a white fill, so If we have an icon with a black fill, we can use invert() to convert it to white before applying the SVG filter.

.icon:hover {
  filter: invert(100%) url('assets/your-SVG.svg#id-of-your-filter');
}

If we just have a hex code, the math is a little trickier, although there are plenty of hex-to-RGBA converters out there. To help out, I’ve made a HEX to feColorMatrix converter.

See the Pen
HEX to feColorMatrix converterr by Cassie Evans (@cassie-codes)
on CodePen.

Have a play around, and happy filtering!

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.

Let’s look at the ways.

Inline SVG

Inline SVG is my favorite way to use SVG anyway, in part because of how easy it is to access and style the SVG.

See the Pen
bJXNyy by Chris Coyier (@chriscoyier)
on CodePen.

If you’re used to working with icon fonts, one thing you might enjoy about them is how easy it is to change the color. You’re largely limited to a single color with icon fonts in a way that SVG isn’t, but still, it is appealingly easy to change that single color with color. Using inline SVG allows you to set the fill, which cascades to all the elements within the SVG, or you can fill each element separately if needed.

SVG Symbol / Use

There is such thing as an SVG sprite, which is a group of SVGs turned into <symbol> elements such that any given icon can be referenced easily with a <use> element.

See the Pen
Use SVG Hovers by Chris Coyier (@chriscoyier)
on CodePen.

You can still set the fill color from outside CSS rather easily this way, but there are caveats.

• The internal SVG elements (like the <path>) can have no fill themselves. This allows the fill set from the parent SVG to cascade into the Shadow DOM created by <use>. As soon as you have something like <path fill="blue" ... /> in the <symbol>, you’ve lost outside CSS control.
• Likewise, the fill of individual elements cannot be controlled within the SVG like you could with inline SVG. This means you’re pretty firmly in single-color territory. That covers most use cases anyway, but still, a limitation nonetheless.

SVG background images

SVG can be set as a background image just like PNG, JPG, or whatever other graphics format. At this point, you’ve sort of given up on being able to change the fill. One possibility, which I’d argue isn’t a particularly good one, is to have two versions of every icon, in the respective colors, and swap between them:

See the Pen
Background SVG Hovers by Chris Coyier (@chriscoyier)
on CodePen.

I don’t blame you if you’d rather not swap sources, so another possibility is to get gnarly with filters.

See the Pen
Background SVG Hovers with Filters by Chris Coyier (@chriscoyier)
on CodePen.

Trying to finagle the right filters to get the color right is tricky stuff. Fortunately, Barrett Sonntag made a tool to calculate the filters for you! Turning black to red ends up a whacky combination like this: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);.

SVG also has object, which is kinda neat in that it had a built-in fallback back in the day — although browser support is so good these days, I honestly have never used it. But if you’re using it, you would probably have to use this filter technique to swap color on hover.

See the Pen
Background SVG Object Hovers by Chris Coyier (@chriscoyier)
on CodePen.

Use a mask instead of a background image

This way, the SVG is still in charge of essentially drawing the shape, but the color comes from the background-color (or image! or gradient!) behind it rather than the SVG itself.

See the Pen
Background SVG Hovers with Mask by Chris Coyier (@chriscoyier)
on CodePen.

SVG background images as data URLs

This doesn’t change that much from above, but it does open up one interesting possibility: Using a variable for the internal fills. Here that is with Sass keeping the URLs as variables:

See the Pen
Background SVG Hovers with Data URL variables by Chris Coyier (@chriscoyier)
on CodePen.

You can also do this with native CSS custom properties!

Hyperlinks are the most fundamental building blocks of the web. They are the elements that people interact with the most. In the earlier days of the web, only text and blue color were used to indicate links. In modern web design, we can be more creative when designing links such as using icons but we need to ensure that the usability of the links doesn’t suffer. When designing icon links we need to make it obvious they are clickable. Using hover effects to change the icon and background color is a good way to indicate they are clickable.

In this tutorial, we’re using FontAwesome icons. Icon fonts are ideal to work with when you want to change the link colors easily. All you have to do is change their color property in your CSS file. If you’re using SVG instead of FontAwesome, you can change the color easily with the fill property. With PNG and JPEG image files, you need to provide two sets of images with different colors for each icon, one for regular state and one for the hover state. This is why links using icon fonts and SVG images are much more practical:

Since we’re not using any a tags for the links and instead relying on Javascript’s onclick function, we also need to indicate links by changing the cursor. This is especially important for color-blind users as they can’t distinguish colors, they need other indicators for links. We need to set the cursor to pointer so that when users hover over the link, the cursor will change from an arrow to a hand, making it clear the element is clickable.

External Links

Let’s start by including the necessary Bootstrap and FontAwesome source links in the HTML file:

HTML

Below we have the code for a Bootstrap container box with three links. Replace the # in the onclick attribute with the link address you want to put. Copy and paste the code below and feel free to customize the layout and the number of links as you need:

Notice that we have an icon and a descriptive heading with an h3 tag under the icon for each link. This is because icons by themselves may not be descriptive enough for the users so we also provide text to make it clear what the link is about. According to the Nielsen Norman group, icons need a text label to clarify their meaning. 

CSS

Here’s the complete CSS code. We have a div with a classname of .ct-icon-boxes that contains all the icon boxes. Each icon box in a div with a .ct-icon-box classname. We don’t have to select the icons and the headers separately to set their colors. We simply select the .ct-icon-box element and when we give it a color value, it will set both the icon and the heading color to that value:

And here’s our finished icon links. Hover over the icon boxes to see the hover effect:

От автора: В этой обучающей статье мы рассмотрим создание нескольких красивых (но простых) эффектов для иконок при наведении, созданных при помощи CSS3 переходов и трансформаций.

Иконки. Сегодня они присутствуют везде, в наших приложениях и сайтах, и все они выполняют важные функции. Они указывают пользователям на различные варианты взаимодействия или направляют их по различным внешним ссылкам, например, по ссылкам на социальные сети и другие медиа-сервисы. Иконочные спрайты стали обычным явлением, и важны с точки зрения разработчиков, а также позволяют привлечь внимание пользователей благодаря использованию CSS классов, срабатывающих при наведении. Данные классы способны добавить больше интерактивности и стиля нашим приложениям/сайтам. В этой обучающей статье я планирую показать вам 5 разных состояний иконок, когда на них наведен курсор мыши, для создания которых используются CSS3 переходы и трансформации. Рассмотренные далее состояния иконок будут лучше привлекать внимание конечных пользователей, и, возможно, будут увеличивать показатели кликабельности элементов на сайте или в приложении.

Разметка для наших иконок

Разработчики используют разные варианты разметки при создании структуры для иконок. В этой обучающей статье иконки будут ссылаться на что-нибудь, поэтому я буду использовать для иконок тег <a>. Для разметки иконок, выполняющих только презентационную (визуальную) функцию (например, иконки перед заголовками и т.д.), я очень часто видел, как разработчики используют тег <i>. И хотя это не является семантической разметкой, данный способ очень популярен, т.к. здесь используется тег, состоящий всего из одной буквы.

Для данной обучающей статьи мы будем использовать иконки, которые ссылаются на что-нибудь, потому что ссылки ассоциируются с состояниями, возникающими при наведении курсора мыши. Наиболее частным примером использования набора иконок, который можно встретить в сети, являются социальные иконки. Я буду использовать следующие 5 иконок, чтобы мы могли увидеть разное поведение иконок в действии:

Каждая из иконок будет иметь по три разных класса:

Итак, в общем у наших иконок будет следующая структура:

А теперь давайте посмотрим на общий CSS код.

Общий CSS код для наших иконок

Каждая из иконок будет отображаться в виде инлайн-блока (inline-block), но вы можете сделать иконки и просто блочными элементами, в зависимости от ваших нужд. Поскольку в эстетических целях мы будем использовать псевдо-классы, то по умолчанию свойство overflow будет иметь значение hidden. Нам также не нужно, чтобы отображался текст, поэтому мы его скроем. Вот CSS:

Небольшое замечание. Для каждого примера используется спрайт изображений. Спрайты изображений работают фантастически хорошо, особенно когда при наведении курсора мыши нужно показать второй вариант иконки. Все спрайты доступны в исходниках (ссылки есть вверху и внизу статьи). Теперь давайте поближе познакомимся с нашими примерами.

Стиль № 1 – Одноцветная иконка с изменяющимся фоном

В данном примере мы собираемся задействовать два важных момента:

Если у нас есть спрайт, и каждая иконка имеет два варианта (в данном случае серый и белый), мы можем применить переход к свойству background, чтобы одна иконка перетекала в другую при наведении. Поскольку мы используем переход для свойства background, мы можем также изменить при наведении и свойство background-color. Вот наш CSS:

Стиль №2 – Приподнятая иконка с изменяющейся границей

По своим предыдущим экспериментам я заметил, что границы не очень плавно изменяются при переходах. Поэтому в данном случае я сымитировал границу, используя псевдо-элемент и анимируя его за счет изменения высоты. Для псевдо-элемента будет задан фоновый цвет, и иконка будет приподниматься на расстояние равное высоте псевдо-элемента, как будто ее «подталкивают» вверх. Вот CSS:

Стиль № 3 – Иконка, появляющаяся слева

В данном примере будет отображаться обычная одноцветная иконка. Когда пользователь наведет курсор мыши на иконку, то будет казаться, что цветной вариант иконки «выплывает» слева и выталкивает одноцветный вариант иконки. Мы снова будем использовать псевдо-элемент, на этот раз для двух состояний (обычного и при наведении), оставив обычный элемент с классом .icon в качестве контейнера. Псевдо-элемент будет плавно перемещаться внутри контейнера благодаря свойству left, и за счет свойства transition «скольжение» элементов будет плавным. Вот CSS:

Стиль № 4 – Сплошной фон, анимировано переходящий в тонкую рамку

В данном примере по умолчанию для всех иконок будет задан сплошной фоновый цвет. При наведении будет осуществляться переход фона в тонкую рамку. Как я уже упоминал ранее, я не фанат использования рамок для границ, поэтому на этот раз я воссоздам данный эффект, используя свойство box-shadow, которое будет иметь значение inset. Тень будет указана для псевдо-элемента, расположенного позади иконки. Для самой тени не будет использовано вообще никакого размытия, т.е. будет отображаться сплошной фон. При наведении мы будем уменьшать значение. Вот CSS:

Стиль № 5 – Вращение кубической иконки

В данном примере будут использоваться CSS3 перспективы, позволяющие нам создавать фигуры, у которых как будто есть объем и глубина (3D). Я буду использовать стандартный элемент в качестве контейнера и два псевдо-элемента в качестве лицевой и обратной сторон куба. При наведении куб будет вращаться по оси X, создавая классный эффект. Вот CSS:

Браузерная поддержка

Данные стили для иконок очень сильно зависят от псевдо-элементов, переходов и трансформаций, поэтому проверьте браузерную поддержку перед их использованием в своем проекте. Конечно, очень легко использовать в качестве запасного варианта обычную квадратную иконку с фоновым изображением, а все переходы/трансформации просто будут проигнорированы в тех браузерах, которые не поддерживают данные свойства.

В заключение

Вот и подошла к концу данная обучающая статья! Не забудьте, что вы можете посмотреть демо-примеры и скачать исходники по нижеприведенным ссылкам. Если у вас есть какие-либо вопросы, пожелания или замечания, поделитесь ими в комментариях.

Автор: Nick Salloum

Источник: //callmenick.com/

Редакция: Команда webformyself.

* Признана экстремистской организацией и запрещена в Российской Федерации.