aタグと擬似要素を使ったリンクボタンに、
背景色とアイコンを組み合わせたいのですが、
うまくいきません。
作りたいボタンは、
青い長方形の中に白い枠線があり、
文字の前にはアイコン、文字の後ろに矢印(>)を入れたものです。
コードは以下のようになります。
html
1<a class="btn" href="#">ボタン</a>
css
1.btn { 2 display: block; 3 width: 100%; 4 margin: 10px auto; 5 padding: 5px 10px 5px 20px; 6 color: #fff; 7 text-decoration: none; 8 text-align: center; 9 border: 1px solid #fff; 10 position: relative; 11} 12.btn::before { 13 position: absolute; 14 top: -5px; 15 left: -5px; 16 width: calc(100% + 10px); 17 height: calc(100% + 10px); 18 z-index: -1; 19 background: blue; 20 content: '>'; 21 text-align: right; 22 vertical-align: middle; 23} 24.btn::after { 25 position: absolute; 26 top: 0; 27 right: 0; 28 display: block; 29 width: 100%; 30 height: 100%; 31 content: ''; 32 background: url('img/sample/icon.png') no-repeat; 33}
html部分を一切変更しないで、
CSSのみでボタンデザインが実現可能でしょうか?
もし、可能であればサンプルコードをご教示いただけますと幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/11 05:31