Blog Detail

CSS3

30 1月 18
Spike
No Comments

 

トランジション (Transition)

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)
}