純粋なテキストとアイコン付きのボタンを実現するための 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 ボックス モデルの使用経験の概要

推薦する

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

VMware Workstation 14 Pro インストール Ubuntu 16.04 チュートリアル

この記事では、VMware Workstation14 ProにUbuntu 16.04をインストー...

JavaScriptプロトタイプチェーンを理解する

目次1. プロトタイプとプロトタイプチェーンの平等関係を理解する2: プロトタイプとプロトタイプ チ...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

MySQL に接続されている IP アドレスを表示する方法の例

具体的な方法：まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

静的ページと動的ページの実行メカニズムの説明

1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...

webpackのモバイル適応ソリューションの概要

目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...

mysql explain（分析インデックス）の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

Nginx 502 Bad Gateway エラーの原因と解決策

Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

MySQL シリーズ 11 ログ

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

MySQLクエリが遅い原因と解決策

クエリ速度が遅くなる理由は多数ありますが、最も一般的な理由は次のとおりです。 1. インデックスがな...

Linuxコマンドのファイル上書きとファイル追加の詳細な説明

1. コマンド > と >> の違いコマンド>: ファイルが存在する場合は、...