CSS3
トランジション （Transition）
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<a href="#" class="btn">Button</a>
</body>
</html>
CSS
@charset "utf-8";
.btn {
weight: 40px;
/*height: 20px;*/
display: inline-block;
padding: 0.8em 2.5em 0.8em 2.5em;
margin: 50px 0 0 50px;
font-family: sans-serif;
color: rgb(129, 128, 128);
font-weight: bold;
text-decoration: none;
background-color: #b4e9ed;
border: 4px solid #666;
border-radius: 13px;
box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.5);
transition-property: border-color,box-shadow;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease-out;
}
.btn:hover{
border-color: #999;
}
.btn:active {
border-color: #666;
box-shadow: inset 0px 0px 12px 0 rgba(0, 0,0, 0.75)
}
More from my site
(Visited 1,496 times, 1 visits today)
投稿日: 2018年1月30日Kazu