ボタンにcssが一部反映されない

下のサイトにあるボタンを実装しようと思い、一つはlink_toのリンク、もう一つはform_forｍのsubmit.fをカスタマイズしようと思い、以下のコードを書きました。

ボタンデザイン
上記のサイトの９番のボタンをコピペしてきました。

link_toの方ではしっかり実装できました。
比べて、f.submitではボーダー、色、サイズ、hover時の文字色の変化は実装できたのですが、背景が降りてくる機能だけが何故か実装できません。
２つのボタンとも同じクラスで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件

ベストアンサー

rails
1<%= f.submit "登録", class: "button" %>

railsは不勉強なので勘ですが、上記コードはinput要素（type="submit"）を出力していませんか？
その場合::before ::after 等の擬似要素が使えないため、同じ挙動にならないのだと予想します。

<button type='submit'>送信</button> が出力されるような railsのコードを書けば挙動部分は解決すると思います。

投稿2018/10/14 03:10

kei344

総合スコア69407

taishiaaaaa

2018/10/15 03:06

回答ありがとうございます。おそらく問題はinputだったみたいだったみたいです。解決しました。ありがとうございました。

行動規範の内容に同意します

同一ページに二種のボタンを配置されたいなら、class名を分けないと、どちらにどちらの効果をかけたいのか、ブラウザ側から判別できないからでは?1にかけたい効果を9側にかけてしまっている為ではないでしょうか?

クラス名を分けて併用してみることで当方では確認取りましたが、いかがでしょうか?

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5
6<title>bt</title>
7</head>
8<body>
9
10<a class="button1" href="#">Button1</a>
11
12<a class="button9" href="#">Button9</a>
13
14<style>
15.button1,.button9 {
16  display: inline-block;
17  width: 200px;
18  height: 54px;
19  text-align: center;
20  text-decoration: none;
21  line-height: 54px;
22  outline: none;
23}
24.button1::before,.button9::before,
25.button1::after,.button9::after {
26  position: absolute;
27  z-index: -1;
28  display: block;
29  content: '';
30}
31.button1,.button9,
32.button1::before,.button9::before,
33.button1::after,.button9::after {
34  -webkit-box-sizing: border-box;
35  -moz-box-sizing: border-box;
36  box-sizing: border-box;
37  -webkit-transition: all .3s;
38  transition: all .3s;
39}
40	
41.button1 {
42  background-color: #333;
43  color: #fff;
44}
45.button1:hover {
46  background-color: #59b1eb;
47}
48
49
50
51.button9 {
52  position: relative;
53  z-index: 2;
54  background-color: #fff;
55  border: 2px solid #333;
56  color: #333;
57  line-height: 50px;
58  overflow: hidden;
59}
60.button9:hover {
61  color: #fff;
62}
63.button9::after {
64  top: -100%;
65  width: 100%;
66  height: 100%;
67}
68.button9:hover::after {
69  top: 0;
70  background-color: #333;
71}
72</style>
73
74</body>
75</html>