Cocoonのコメントボックスのカスタマイズ

こんな見た目になります

ボタンには影をつけてリアルなボタンっぽさを出しました。

Cocoonのコメントボックスのカスタマイズ手順

下のカスタマイズ用CSSコードを「追加CSS」にコピペして、カラーコードの部分を好きな色に置き換えます。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

カスタマイズ用CSSコード

/* テキストエリアの枠線 */
textarea{
 border: 2px solid #a4e8e6; /* 線の色 */
    border-radius: 3px;
    outline: none;
}

/* ボタン */
.comment-btn,input[type='submit']{
    display: inline-block;
 line-height: 1;
 color: #fff; /* 文字の色 */
 background: #f58694; /* ボタンの色 */
 border: none; /* もともとのグレーの輪郭線を消したい場合は入れる */
 padding: 12px 20px;
 border-radius: 3px;
 margin: 10px;
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
    -webkit-tap-highlight-color: transparent;
    transition: .3s ease-out;
}
.comment-btn:hover{
	color: #fff; /* 文字の色 */
 background: #f58694; /* ボタンの色 */
	box-shadow: 0 13px 20px -3px rgba(0, 0, 0, 0.24);
}

フラットデザインバージョン

影なしのフラットバージョンです。

/* テキストエリアの枠線 */
textarea{
 border: 2px solid #a4e8e6;
    border-radius: 3px;
    outline: none;
}

/* ボタン */
.comment-btn,input[type='submit']{
  background: #faa2c1;
    color: #ffffff;
    border: solid 2px #faa2c1;
	border-radius: 3px;
}
.comment-btn:hover{
		background-color: #fff;
    transition: all 0.3s ease-in-out;
    color: #faa2c1;
}