css hover link style : demo 181

HTML

1
2
3
4
5
<div class="demo">
    <a href="#" class="link">
        <span>Hover me</span>
    </a>
</div>

CSS

(Fonts required: Quicksand.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.link{
    color: #2C3A47;
    font-family: 'Quicksand', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 20px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: all 0.5s ease 0s;
}
.link:hover,
.link:focus{
    color: #82589F;
}
.link:before,
.link:after{
    content: '';
    background: #82589F;
    width: 50%;
    height: 250%;
    border-radius: 50%;
    opacity: 0.15;
    transform: translateY(-50%) scale(0);
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.75, 0.2, 0.165, 1);
}
.link:after{
    left: auto;
    right: 10px;
}
.link:hover:before{ transform: translateY(-50%) scale(1); }
.link:hover:after{ transform: translateY(-50%) scale(0.8); }
@media only screen and (max-width: 767px){
    .link{ margin-bottom: 30px; }
}
License Terms