Html+cssでプレーンテキストとアイコン付きボタンを実現する
2022-01-09 07:58:56
この記事では、いくつかの基本的なページ要素の実装についてまとめており、順次更新していく予定です。まず、最も遭遇したのはボタンの切り出しかもしれませんが、ボタンは様々な外観を持っているかもしれませんが、一般的には純粋なテキストとアイコン付きのボタンに分けることができ、以下はこの2つのボタンの実装についてお話します。レンダリングは以下の通りです。
コードは以下の通りです。
XML/HTMLコード
コンテンツをクリップボードにコピーする
- < プリ > < プリ 名称 = "コード" クラス = "html" > >
- < html ラング = "zh-CN" >
- < ヘッド >
- < タイトル > ボタンの書き方 < タイトル >
- < メタ 文字セット = "UTF-8" >
- < メタ http-equiv = "X-UA-Compatible "である。 コンテンツ = "IE=Edge,chrome=1 "です。 >
- < リンク リレー = "スタイルシート" href = "css/style.css" >
- < スタイル タイプ = "text/css" >
- a:hover{text-decoration:none;}。
- .btn{
- display: inline-block;
- margin-top: 10px;
- padding: 10px 24px。
- border-radius: 4px;
- background-color: #63b7ff。
- 色になります。#fff;
- cursor: ポインタ。
- }
- .btn:hover {
- background-color: #99c6ff。
- }
- .inbtn {
- border: none;
- }
- .bubtn{。
- border: none;
- }
- .btn {
- font-style: normal;
- }
- .bgbtn span {
- margin-left: 10px;
- padding-left: 20px;
- background: url(images/edit.png) left center no-repeat;
- }
- .bgbtn02 img{。
- margin-bottom: -3px;
- margin-right: 10px;
- }
- < スタイル >
- < ヘッド >
- < ボディ >
标签按钮--。 - < a ホールド = "" クラス = "btn" > a标签按钮 < a >
标签按钮--。 - < 入力 クラス = "inbtn btn" タイプ = "ボタン" 値 = "入力标签按钮" />
标签按钮--。 - < ボタン クラス = "bubtn btn" > ボタン タグ ボタン < ボタン >
- < i クラス = "ibtn btn" > iタグボタン < i >
背景アイコン付きボタン --> - < a ホールド = "" クラス = "bgbtn btn" >
- < スパン > アイコン付きボタン < スパン >
- < a >
- < a ホールド = "" クラス = "bgbtn02 btn" >
- < イムグ src = "画像/edit.png" /> アイコン付きボタン
- < a >
- < ボディ >
- < html >
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン