I found this code online that creates a cool button which looks pressed when clicked. I want to modify it so that the button appears pressed on hover instead of click. How can I achieve this?
/**
* AddToCalendar Icon Style
* http://addtocalendar.com
*/
/* Base */
.addtocalendar var{
display: none;
}
.addtocalendar {
position: relative;
display: inline-block;
background: transparent!important;
}
.atcb-link {
display: block;
outline: none!important;
cursor: pointer;
}
.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
visibility:visible;
}
.atcb-list {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 170px;
z-index: 900;
}
.atcb-list,
.atcb-item
{
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
.atcb-item {
float: none;
text-align: left;
}
...
Add to Calendar