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

推薦する

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化（​​つまり、すべてのデータがオンラインで完了し、インポートや...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

Truncate Table の使用法の説明

テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...

mysql での rpm インストールの詳細な説明

インストールとアンインストールの表示 # rpm -qa | grep mysql を表示 # アン...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析

セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...