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

推薦する

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

HTMLはマウスをホバーしたときにテキストを表示するためにtitle属性を使用します。

コードをコピーコードは次のとおりです。 <a href=# title="ここに表示...

HTML 終了タグの問題と W3C 標準

W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...

nginx共有メモリの仕組みの詳細な説明

Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

HTML の大なり、小なり、スペース、引用符などでよく使用されるエスケープ コードのリスト。

表は以下のとおりです。 HTMLソースコード結果を表示説明する&lt; <未満記号また...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

MySQL で特定の親行のすべての子行を見つけるソリューション

序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...