下のサイトにあるボタンを実装しようと思い、一つはlink_toのリンク、もう一つはform_formのsubmit.fをカスタマイズしようと思い、以下のコードを書きました。
ボタンデザイン
上記のサイトの9番のボタンをコピペしてきました。
link_toの方ではしっかり実装できました。
比べて、f.submitではボーダー、色、サイズ、hover時の文字色の変化は実装できたのですが、背景が降りてくる機能だけが何故か実装できません。
2つのボタンとも同じクラスでcssに書いているので、打ち間違えで一部が適用されていないということはありえないと思います。
なぜ降りてくるエフェクトが一部反映されないのか、どなたかご教授ください
html
1<%= link_to "登録", signup_path, class: "button" %>
html
1<%= form_for(@user) do |f| %> 2 <%= f.label :name, "名前" %> 3 <%= f.text_field :name %> 4 5 <%= f.label :email, "メールアドレス" %> 6 <%= f.email_field :email %> 7 8 <%= f.label :password, "パスワード" %> 9 <%= f.password_field :password %> 10 11 <%= f.label :password_confirmation, "確認用パスワード" %> 12 <%= f.password_field :password_confirmation %> 13 14 <%= f.submit "登録", class: "button" %> 15 <% end %>
css
1.button-home { 2 display: inline-block; 3 width: 200px; 4 height: 54px; 5 text-align: center; 6 text-decoration: none; 7 line-height: 54px; 8 outline: none; 9 position: relative; 10 z-index: 2; 11 background-color: rgba(0,0,0,0.2); 12 border: 2px solid #333; 13 color: #fff; 14 line-height: 50px; 15 overflow: hidden; 16 font-size: 20px; 17} 18 19.button-home:hover { 20 color: #fff; 21 text-decoration: none; 22} 23 24.button-home::before, 25.button-home::after { 26 position: absolute; 27 z-index: -1; 28 display: block; 29 content: ''; 30 top: -100%; 31 width: 100%; 32 height: 100%; 33} 34.button-home, 35.button-home::before, 36.button-home::after { 37 -webkit-box-sizing: border-box; 38 -moz-box-sizing: border-box; 39 box-sizing: border-box; 40 -webkit-transition: all .3s; 41 transition: all .3s; 42} 43.button-home:hover::after { 44 top: 0; 45 background-color: #333; 46}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/15 03:06