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 704 times, 1 visits today)
投稿日: 2018年1月30日Kazu