この記事では、HTML を使用して簡単なボタン スタイルを実装する方法を主に紹介します。
Webデザインのプロセスにおいて、ボタンの設定は最も一般的かつ基礎的なHTML/CSSの知識とスキルであると言えます。 推奨される参考ビデオ チュートリアル: 「HTML チュートリアル 」
ボタン ボタン スタイルコード例は次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>button按钮样式</title> <style> .button1 { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 16px 32px; text-align: center; background-color: white; color: black; border: 2px solid #4CAF50; border-radius:5px; } .button1:hover { background-color: #4CAF50; color: white; } </style> </head> <body> <button class="button1">Green</button> </body> </html>効果は次のとおりです:
関連属性の紹介:
transition-duration この属性は、-webkit-transition の効果が完了するまでにかかる時間を指定します。 -duration 属性はブラウザ Safari との互換性のためのものです。
text-align 属性は、要素内のテキストの水平方向の配置を指定します。値 center は、テキストが水平方向の中央に配置されることを意味します。
border-radius プロパティを使用すると、要素に丸い境界線を追加できます。
:hover セレクターは、マウス ポインターが浮いている要素を選択するために使用されます。簡単に言えば、マウスが指定された要素に移動したときに新しいスタイルを設定します。
関連タグの紹介:
以上がHTML を使用して単純なボタン スタイルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

WebStorm Mac版
便利なJavaScript開発ツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
