Hover States

[00:00:01]
>> Rodriguez: So the kind of baseline for adding interactivity is to add hover states to elements inside of your email. I usually just links or buttons of some sort you want to add a hover state somewhere or how you would have on a website. So this is great for accessibility because it adds that additional visual cue to let somebody know that this is interactive you can take some sort of action with this element.

[00:00:24]
These do have to be included in the head of your document now. So if any mail client does end up stripping those embedded styles, then that hover functionality won't work for your subscribers and it's pretty easy, you're just using again that hover pseudo selector. Similar to how you would on a website and just adding that into the head of your document to adjust any of the CSS properties that you want.

[00:00:49]
So let's look at an example here. Let's go over our code and if we open up that single column hybrid, I'm going to start using that email from going to here on out and we can see that we have our button that we added in there from buttons.cm.

[00:01:06]
And then we have our link down here in the footer of our email. That's an unsubscribe link. If we go over here you can see these hover states, both of those are changing color. Pretty simple stuff. You're just going to be targeting those different things for the button.

[00:01:26]
We're going to add a class a button to that link since we don't want to target all links necessarily with this styles. We're just going to target that specific button using the class of button and then we go to our embedded CSS up here and we're adjusting those styles.

[00:01:41]
So, just to make sure it's usually handy to have some sort of default anchor styling embedded in your CSS because a lot of times you'll be working with, they'll be coding a template for like a wizard wig editor or something like that. That you don't really have access to the code that's injected into your email.

[00:01:58]
So if you have some universal settings for links, even if somebody adds a link and you can update that a tag specifically, it'll still cover that link. Which is nice but then we're just starting the hover state of that and changing the color of that. Whatever that link happens to be, in this case, it's changing from blue to red.

[00:02:16]
Similar to the button, all we have to do for that VML based button which is super nice if you wanna add this kind of interactivity is just target the background color and update that background color. If you're using something like that padding approach, well padding is pretty easy because you're still relying on background colors but if you're using the border or padding plus border based approach, then this CSS will be a little bit longer because then you have to update each individual border property with that updated color that with whatever you happen to be using.

[00:02:45]
You can get a little bit fancier with hover's stuff. You can pop them the CSS.dash animations.html example. And this is doing a couple of other things. You'll see some other animation in here too when we open it up. So, for this button, we're raising it up here, we're adding little it's hard to see on the screen here.

[00:03:09]
By adding a box shadow beneath that side to note some sort of depth to it so similar what you'd see on websites but it happens to work inside of an email. It's the way we're doing that is by again targeting that button and then just adding a couple of different properties to that hover state.

[00:03:26]
So, again we're updating the background color but then we're using this CSS 3 box shadow property which is super handy setting those properties. In this case, it's the I believe it's the X axis off-set, the Y axis off-set and then the blur of it. So, It's going to go down a little bit and then be blurred out to 24 pixels.

[00:03:46]
Then we're using GBA to set the capacity of that so it's not super dark and I don't we're adjusting the height or the the placement of that by using the transform property and then translating why so that it shifts up 10 pixels. You can ease all of that which is awesome using this transition property set on that the non hover state of that button.

[00:04:08]
So here we're saying we want to transition all these properties over 0.2 seconds and we're going to use this easing function to make it look nice kind of eases and eases out which is awesome. And that'll give you that nice little animation which is not super, it's not necessary for the functionality of the button but it is one of those nice enhancements for people, and kinda sets your email apart from others inside of the inbox.

[00:04:36]
The nice thing about all this interactivity is that if it's not supported then it just falls back. You don't have to worry about overriding any styles or anything like that for where it's unsupported. It'll just fall back to that default. That simple hover state or no hover if hover is not supported.