Railsでbutton_toにcssを適用してみた話

Ruby Ruby on Rails css

はじめに

現在作成しているWeather Appのデザインを考えていたらlink_toでリンク形式よりはbutton_toでボタン形式にした方が良いと気づきbutton_toを使ってみました。

link_toからbutoon_toへ

button_toを見てみると

button_to(文字列 [, オプション, HTMLオプション]

と書いてあったので、

<%= button_to t(".today"), {:controller => "weather", :action => "today"}, {method: :get, class: "today"} %>

のように記述を変更しました。

CSSを適用

以下サイトからボタンイメージを借りてみました。 CSSで実装するボタンデザインとホバーエフェクトのアイデア transitionを使ってエフェクトをつけてみる

サイトデザインに対して少しボタンが大きかったので自分用にサイズを調整して使ってみました。

.today{
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #FFA500;
  border-radius: 5px;
  -weabkit-transition: all 0.5s;
  transition: all 0.5s;
  margin: 10px;
}

.today:hover{
  background-color: #f9c500;
}

終わりに

デザインが作られた状態でCSSを組むのはやったことがあったんですが、デザインを作りながらCSSを組んでいくのは大変ですね。