ボタンに2つの異なるフラットカラーを追加して、CSSスタイリングをボタンに追加したいとします。ボタンの左半分は青色で、右半分は赤色でなければなりません。ボタンに2つの異なるフラットカラーを追加して、CSSスタイリングをボタンに追加したい
-2
A
答えて
1
あなたが背景としてグラデーションを使用し、50%の最初の色を停止し、50%で第二を開始することができます。
button {
background: -webkit-linear-gradient(blue 50%, red 50%);
background: linear-gradient(to right, blue 50%, red 50%);
background: -o-linear-gradient(blue 50%, red 50%);
background: -moz-linear-gradient(blue 50%, red 50%);
-webkit-appearance: \t none;
appearance: \t none;
border: none;
font-size: 15px;
color: #FFF;
padding: 8px 16px;
}
<button>Button</button>
グラデーションの角度を変更したい場合方向はほんの始まりにXdeg
を使用します。
button {
background: -webkit-linear-gradient(-60deg, blue 50%, red 50%);
background: linear-gradient(-60deg, blue 50%, red 50%);
background: -o-linear-gradient(-60deg, blue 50%, red 50%);;
background: -moz-linear-gradient(-60deg, blue 50%, red 50%);;
-webkit-appearance: \t none;
appearance: \t none;
border: none;
font-size: 15px;
color: #FFF;
padding: 8px 16px;
}
<button>Button</button>
0
このような?
button{
background: -webkit-linear-gradient(left, blue 50%, red 50%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, blue 50%, red 50%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, blue 50%, red 50%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, blue 50%, red 50%); /* Standard syntax */
}
<button>Click here</button>
関連する問題
- 1. 動的にスクロールビューにボタンを追加して追加する
- 2. ボタンに画像を追加してボタンがクリックされない
- 3. CSSのボタンに空白を追加
- 4. グリッドビューのフッターに「追加」ボタンを追加した後に、編集ボタンが正しく機能しない
- 5. 「追加ボタン」を追加するには?
- 6. javafxボタンに追加のアクションを追加
- 7. iPhone - UITableViewで編集ボタンを選択したときに「追加」ボタンを追加
- 8. cssを使用してヘッダにボタンを追加する
- 9. ボタンを追加した後にswiperefreshlayout
- 10. UITableViewスワイプに追加ボタンを追加
- 11. 複数の異なるボタンを使用して複数のアイテムをカートに追加する(カートに追加)
- 12. 角度2追加スタイリング(css、js)
- 13. ionic 2アクションシートのボタンにカスタムアイコンを追加
- 14. 新しい要素にボタンを追加
- 15. DataGridViewの[追加]ボタンをクリックして行を追加する
- 16. CSSを使用してメニュー項目にボタンを追加
- 17. React-Native:ボタンを押したときにボタンを追加する
- 18. 戻るボタンを追加してonBackPressedを追加する
- 19. Xcodeボタンにラベルを追加するボタン
- 20. QTableviewに追加されたボタンにカスタムスタイルを追加する
- 21. 新しいメールウィンドウにMS Outlook(ボタンの隣に)ボタンを追加
- 22. このボタンを追加するカスタムCSSを追加しますか?
- 23. .cssファイル(JavaFX)の異なるボタンに複数のグラフィックスを追加する
- 24. ボタンを追加した後にcontenteditableプロパティが機能しない
- 25. リストビューに2つのボタンを追加するには
- 26. ボタングループを使用して更新ボタンとキャンセルボタンを作成し、次に2つのボタンの間に追加(|)する
- 27. 追加のフォームは、私はノードの追加送信ボタンを追加したリダイレクト
- 28. 異なるボタンを押したときに単数を追加する方法
- 29. 2つのテーブルビューセルの間にボタンを追加する方法
- 30. ボタンの配列を2つのJFrameに追加する
あなたがこれまでにしようとしているものをご提示ください。 –