角丸に変わる | 動くWebデザインアイディア帳

ボタン
-角丸に変わる-

デモページを見る

See the Pen 7-1-39 角丸に変わる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のボタンにカーソルをあわせて動きを確かめてね！

動きを実現する仕組み

CSS のborder-radius を使い、hover をしたら角丸にする。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1-39.css">
</head>

body内のボタンを表示させたい場所に以下のHTMLを記載します。
```
<a href="#" class="btnchangeradius">7-1-39 角丸に変わる</a>
```

自作のCSS内の書き方

/*角丸に変わる*/

.btnchangeradius{
    /*ボタンの形状*/   
	display:inline-block;
    background: #333;
    color: #fff;
    padding: 10px 20px;
	border: 5px double white;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/   
    transition:.3s ease-out;
}

/*hoverした際の角丸のアニメーション*/
.btnchangeradius:hover{
	background:#666;
	border-radius:20px;	
}