頑張りすぎず頑張ろう

気になったことをとにかく書いていきます

トップ > プログラミング > 【CSS】HTMLとCSSで作るホバー時に動くアニメーションリンク【HTML】

【CSS】HTMLとCSSで作るホバー時に動くアニメーションリンク【HTML】

プログラミング

 

index.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLとCSS3でつくるホバー時に動くア二メーションリンク</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cool-link left-to-right">
<a href="#">Left to Right</a>
</div>
<div class="cool-link right-to-left">
<a href="#">Right to Left</a>
</div>
<div class="cool-link center-to-side">
<a href="#">Center to Side</a>
</div>
</body>
</html>

 

 

style.css【ホバー時に下線がでるアニメーション】

 

 

 

@import url('https://fonts.googleapis.com/css?family=Lato');

body {
font-family: 'Lato', sans-serif;
font-size: 21px;
padding: 20px;
background: #073B4C;
}

.cool-link {
margin-right: 5px;
display: inline-block;
}

.cool-link a {
text-decoration: none;
position: relative;
transition: 0.25s ease-in-out;
color: #FFF;
}

.cool-link:hover a {
color: #FFD166;
}

.cool-link a::before {
width: 0;
height: 3px;
background: #FFD166;
position: absolute;
bottom: -5px;
content: "";
}

.cool-link.left-to-right:hover a::before,
.cool-link.right-to-left:hover a::before,
.cool-link.center-to-side:hover a::before {
transition: 0.25s ease-in-out;
width: 100%;
}

.cool-link.right-to-left a::before {
right: 0;
}

.cool-link.center-to-side a::before {
left: 50%;
transform: translateX(-50%);
}