【rails】deviseを使った時のsubmitボタンのレイアウトを変更する

deviseのgemを使った時にrails g devise:viewsでログインや新規登録画面のviewが簡単に作れると思いますが、submitボタンのレイアウトを変更したい場合についての記事を書きます。

devise/registrations/new.html.erb

おそらく作成したばかりの画面をそのまま開くと上図のような画面になっていると思います。
この「Sign up」ボタンを大きくする方法を紹介します。（自分はこれで無駄な時間を過ごしたので）

ファイルパス：devise/registrations/new.html.erb

  <div class="actions">
    <%= f.submit "Sign up"%>

まずhtmlは上記のような感じになっていると思いますが、submitに対してclassをつけてやります。

  <div class="actions">
    <%= f.submit "Sign up" , class: 'sign-btn' %>

こんな感じで。
ここからCSSをあてていきます。

application.scss

.sign-btn {
  width: 300px;
  height: 50px;
}

CSSファイルはどんな指定でもいいと思いますが、今回はapplication.scssにそのまま書いちゃいます。
一度上記のように書いてみてください。

おそらく横幅しか広がっていないと思います。自分はここで少し時間を取られました。
これを回避するためにはborderを指定するだけでheightが効くようになります。

.sign-btn {
  width: 300px;
  height: 50px;
  border: solid 1px;
}

上記のように記載するとちゃんと大きくなります。
こんな簡単なことに少し時間取られたので初心者向けに記事してみました。