クリックするとボタンがへこむようにするため、positionを使っています。
問題はなかったのですが、下に文字を入力するとボタンを押した際に被ってしまいます。
原因は何でしょうか。
↓クリックすると
※周りの点線は気にしないでください
html
1 <div class="middle-right"> 2 <h1>アカウント登録</h1> 3 <h2>簡単に登録できます。</h2> 4 <form action=""> 5 <input type="text" placeholder="姓"><input type="text" placeholder="名"> 6 <br><input type="email" placeholder="携帯電話またはメールアドレス"> 7 <br><input type="passward" placeholder="パスワード"> 8 <br><label for="birthday" class="label">誕生日</label> 9 <br><select name="birthday"> 10 (省略) 11 <option value="birthday">2019年</option> 12 (省略) 13 </select> 14 <select name="birthday"> 15 (省略) 16 <option value="birthday" selected>6月</option> 17 (省略) 18 <select name="birthday"> 19 (省略) 20 <option value="birthday" selected>15日</option> 21 (省略) 22 <br><label for="sex" class="label">性別</label> 23 <br><input type="radio" name="sex" class="sex-item">女性 24 <input type="radio" name="sex" class="sex-item">男性 25 <input type="radio" name="sex" class="sex-item">カスタム 26 <div class="sidebar"> 27 <p>[アカウント登録]をクリックすることで、<a href="#">利用規約</a>、<a href="#">データに関するポリシー</a>、<a href="#">Cookieポリシー</a>に同意するものとします。サービスに関連してFacebookからSNS通知が届くことがありますが、これはいつでもオフに設定できます。</p> 28 登録">**<a href="#" class="btn"><input type="submit" value="アカウント</a>** 29 </form> 30 ** <h3>有名人、バンド、ビジネスのために<a href="#">Facebookページを作成</a></h3>** 31 </div> 32
CSS
1/* メイン 右*/ 2.middle-right { 3 float: right; 4 width: 45%; 5} 6.middle-right h1 { 7 font-size: 36px; 8 color: #333333; 9 margin: 0; 10 padding: 13px 0 5px; 11} 12.middle-right h2{ 13 font-weight: normal; 14 font-size: 19px; 15 color: #333333; 16 margin: 0; 17 padding-bottom: 13px; 18} 19form input { 20 height: 23px; 21 border-radius: 5px; 22 padding: 8px 10px; 23 margin-bottom: 10px; 24 font-size: 18px; 25 border: 1px #92b2d7 solid; 26 color: #9b9b9b; 27} 28input[type="text"] { 29 width: 185px; 30 margin-right: 0.5em; 31} 32input[type="email"] { 33 width: 400px; 34} 35input[type="passward"]{ 36 width: 400px; 37} 38input[type="radio"] { 39 font-size: 18px; 40 color: block; 41} 42select[name="birthday"] { 43 font-size: 13px; 44 padding: 5px; 45 border: 1px #92b2d7 solid; 46} 47.sex-item { 48 color: block; 49 font-size: 18px; 50} 51.label { 52 color: #91949b; 53 font-size: 16px; 54 font-weight: bold; 55 margin: 10px 0 5px; 56} 57.sidebar { 58 width: 330px; 59 margin: 0; 60 font-size: 11px; 61 color: #8f9093; 62} 63.sidebar a{ 64 color: #4967ad; 65} 66input[value="アカウント登録"] { 67 font-size: 19px; 68 color: white; 69 background: linear-gradient(#81b368,#62864b); 70 width: 194px; 71 height: 39px; 72 font-weight: bold; 73 padding: 5px 20px; 74 outline: none; 75} 76**.btn { 77 position: relative; 78}** 79**input[value="アカウント登録"]:hover { 80 background: linear-gradient(#81b368,#62864b); 81} 82input[value="アカウント登録"]:active { 83 background: linear-gradient(hsl(100, 46%, 69%),#62864b); 84 position: absolute; 85 top: 2px; 86 outline: none;** 87} 88**h3{ 89 font-size: 13px; 90 color: #666666; 91}** 92
長いですが念のため前の部分のHTML,CSSを一部載せています。
Facebookのログインページの模写コーディングをしています。
Facebook ログインページ→【https://ja-jp.facebook.com/】
回答1件
あなたの回答
tips
プレビュー