button {
color: #FFB7C5;
transition: 0.25s;
&:hover,
&:focus {
border-color: #EF98AA;
color: #fff;
}
}
.pulse:hover,
.pulse:focus {
animation: pulse 1s;
box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 #EF98AA; }
}
Pulse
The code creates a button that has a red border when it is not being hovered over or focused on, and a green border when it is being hovered over or focused on. The border color will change depending on whether the button is in the "pulse" state or not.
Shortcut: btn.pulse
0 Comments
Add Comment
Log in to add a comment