こんな見た目になります


ボタンには影をつけてリアルなボタンっぽさを出しました。
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;
}