Simple text hover effect with css
A Pen by Antonija Šimić on CodePen.
<main> | |
<div class="container"> | |
<p class="main-paragraph">Hover me!</p> | |
</div> | |
</main> |
Simple text hover effect with css
A Pen by Antonija Šimić on CodePen.
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); | |
html, | |
body { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
width: 100%; | |
display: flex; | |
-webkit-justify-content: center; | |
justify-content: center; | |
-webkit-align-items: center; | |
align-items: center; | |
background-color: #1BA39C; | |
font-family: 'Source Sans Pro', Arial; | |
} | |
.main-paragraph { | |
display: block; | |
width: 100%; | |
padding: 20px; | |
position: relative; | |
z-index: 2; | |
text-decoration: none; | |
color: #2C3E50; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
font-size: 5em; | |
font-weight: 600; | |
} | |
.main-paragraph:after { | |
content: ""; | |
height: 3%; | |
left: 0; | |
bottom: 0; | |
width: 1px; | |
position: absolute; | |
-webkit-transition: all 0.2s ease; | |
-moz-transition: all 0.5s ease; | |
-ms-transition: all 0.5s ease; | |
-o-transition: all 0.5s ease; | |
transition: all 0.5s ease; | |
z-index: -1; | |
background: transparent; | |
right: 0; | |
margin: 0 auto; | |
} | |
.main-paragraph:hover { | |
border-bottom: 0px; | |
color: #fff; | |
-webkit-transition: all .8s ease; | |
-moz-transition: all .8s ease; | |
-ms-transition: all .8s ease; | |
-o-transition: all .8s ease; | |
transition: all .8s ease; | |
cursor: pointer; | |
} | |
.main-paragraph:hover:after { | |
width: 100%; | |
background: #fff; | |
} |