丸がボタンに変形する | 動くWebデザインアイディア帳

ボタン
-丸がボタンに変形する-

デモページを見る

See the Pen 7-1-41 丸がボタンに変形する by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

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

動きを実現する仕組み

CSS のborder-radius を使い、高さの半分の固定値に丸みを設定し、hover をしたら横幅を伸ばす。
テキストの下に配置するため、z-index の値を-1 にして最背面に配置する。

HTMLの書き方

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

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

body内のボタンを表示させたい場所に以下のHTMLを記載します。
```
<a href="#" class="btntransform">リンクテキストが入る</a>
```

自作のCSS内の書き方

/*丸がボタンに変形する*/

.btntransform{
    /*丸の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
    display: inline-block;
	padding:0 0 0 15px;
	line-height: 50px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/* 丸が動く */
.btntransform::before{
	content:'';
    /*絶対配置で丸の位置を決める*/
	position:absolute;
	left:0;
	z-index: -1;
    /*丸の形状*/
	width:50px;
	height:50px;
	background:#ccc;
	border-radius:25px;
    /*アニメーションの指定*/
    transition:.3s ease-out;
}

/*hoverした際の形状*/
.btntransform:hover::before{
	width:212px;
}

/* 矢印の形状 */
.btntransform::after{
	position: absolute;
    content: '';
    top: 1.3em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}