純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS

純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS

この記事では、いくつかの基本的なページ要素の実装方法をまとめており、後で更新される予定です。まず、私たちが最もよく遭遇するのはボタンの切り抜きです。ボタンにはさまざまな外観がありますが、一般的には純粋なテキストボタンとアイコン付きのボタンに分けられます。これら2種類のボタンの実装方法について説明しましょう。効果図は以下のとおりです。

コードは次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. </ pre > < pre  名前= "コード"  クラス= "html" > <!DOCTYPE html >      
  2. < html   lang = "zh-CN" >      
  3. <ヘッド>      
  4.    < title >ボタンの書き方</ title >      
  5.    <メタ 文字セット= "UTF-8" >      
  6.    <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=Edge、chrome=1" >      
  7.    <リンク  rel = "スタイルシート"   href = "css/style.css" >      
  8. <スタイル タイプ= "text/css" >      
  9. a:hover{テキスト装飾: なし;}
  10. .btn{
  11. 表示: インラインブロック;
  12. 上マージン: 10px;
  13. パディング: 10px 24px;
  14. 境界線の半径: 4px;
  15. 背景色: #63b7ff;
  16. 色: #fff;
  17. カーソル: ポインタ;
  18. }
  19. .btn:ホバー{
  20. 背景色: #99c6ff;
  21. }
  22. .inbtn{
  23. 境界線: なし;
  24. }
  25. .bubtn{
  26. 境界線: なし;
  27. }
  28. .btn{
  29. フォントスタイル: 通常;
  30. }
  31. .bgbtn スパン{
  32. 左マージン: 10px;
  33. 左パディング: 20px;
  34. 背景: url(images/edit.png) 左中央 繰り返しなし;
  35. }
  36. .bgbtn02 画像{
  37. 下マージン: -3px;
  38. 右マージン: 10px;
  39. }
  40. </スタイル>      
  41. </ヘッド>      
  42. <本文>      
  43. <!--<a>タグボタン-->      
  44. <   href = ""   class = "btn" > aLabel ボタン</ a >      
  45. <!--<input> タグ ボタン -->      
  46. <入力 クラス= "inbtn btn"  タイプ= "ボタン"   value = "入力ラベルボタン" />      
  47. <!--<button> タグ ボタン-->      
  48. <ボタン  class = "bubtn btn" >ボタンタグ ボタン</ button >      
  49. <!--任意のラベル ボタン-->      
  50. <私  class = "ibtn btn" > i ラベルボタン</ i >      
  51. <!--背景アイコン付きボタン-->      
  52. <   href = ""  クラス= "bgbtn btn" >      
  53.    < span >アイコン付きボタン</ span >      
  54. </ア>      
  55. <   href = ""  クラス= "bgbtn02 btn" >      
  56.    <画像  src = "images/edit.png" />アイコン付きボタン
  57. </ア>      
  58. </本文>      
  59. </html>​​      
各種ラベルの長所と短所については、実際に体験してみる必要があります。 面白いボタンがあれば、一緒に実現しましょう。

<<:  Linux 型バージョン メモリ ディスク クエリ コマンド紹介

>>:  div ボックス モデルの使用経験の概要

推薦する

JS 開発効率を上げる4つの超実践的なヒント

目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

iframe に関するいくつかの発見と考察

この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...

MySQL複合クエリの詳細な説明

UNIONの使用ほとんどの SQL クエリは、1 つ以上のテーブルからデータを返す単一の SELEC...

VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...

JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

目次1. 操作要素1.1. 要素コンテンツの変更1.2. innerText と innerHtml...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

DBeaver を MySQL バージョン 8 以降に接続し、起こりうる問題を解決する方法の詳細な説明

データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...

jsオブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順

この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

CentOS サーバーの時間を北京時間に変更する方法

1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

vue-resource インターセプターの使用に関する詳細な説明

序文インターセプター最近のフロントエンド フレームワークでは、インターセプターは基本的に非常に基本的...