ビョーン

ソースコード

あくまでも一例なので参考程度に使ってください。

ビョーンHTML

<div class="sample">
<textarea placeholder="入力してみよう"></textarea>
</div>

ビョーンCSS

/*　今回はfocusバージョンを作成 */
.sample {
	margin: 0 auto;
	width:100%;
}
.sample textarea {
	padding:.5em 1em;
	border:1px solid #CCC;
	border-radius:4px;
	box-sizing:border-box;
	width:100%;
	height:50px;
	transition: 1s height;
}
.sample textarea:focus {
	height:130px;
}

使い方

• 入力フォームにカーソルフォーカスしたら「ビョーン」と枠が広がるようにしたいんだけど！
• このボタンクリックしたら、こっちの要素を「ビョーン」と大きくして欲しい