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

推薦する

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...

Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...

IdeaでMySQLデータベースに接続すると中国語の文字化けが発生する問題

問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...

HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

MySQLの認証コマンドgrantの使い方

この記事の例は MySQL 5.0 以降で実行されます。ユーザー権限を付与するための MySQL コ...

Ubuntu 20.04 LTSの詳細なインストール履歴

この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...

Linux での MySQL 8.0 インストール チュートリアル

この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...

ROS で Turtlebot3 移動ロボットを制御するための基本的なチュートリアル

中国語チュートリアルhttps://www.ncnynl.com/category/turtlebo...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

MySQL グループレプリケーションの設定手順 (推奨)

MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...

MySQLの文字列インターセプト関連関数の概要

この記事では、MySQL の文字列インターセプト関連の機能を紹介します。具体的な内容は以下のとおりで...

docker で php+nginx+swoole+mysql+redis 環境を構築する方法

オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...