検索
ホームページウェブフロントエンドCSSチュートリアルCSS スタイルを使用して作成された美しいボタン

CSS スタイルを使用して作成された美しいボタン

不言
不言
Jun 21, 2018 pm 05:17 PM
CSSスタイルボタン

この記事では、CSS スタイルを使用して作成された美しいボタンについて主に紹介します。これは、特定の参考価値があります。必要な友達に参考にしてください。CSS スタイルを使用して作成されたボタンは、非常に美しく、収集する価値があります。以下に具体的な実装CSSを掲載しますので、気に入った方は勉強してみてください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Demo: CSS3 Buttons</title> 
<style type="text/css"> 
body { 
background: #ededed; 
width: 900px; 
margin: 30px auto; 
color: #999; 
} 
p { 
margin: 0 0 2em; 
} 
h1 { 
margin: 0; 
} 
a { 
color: #339; 
text-decoration: none; 
} 
a:hover { 
text-decoration: underline; 
} 
p { 
padding: 20px 0; 
border-bottom: solid 1px #ccc; 
} 
/* button 
---------------------------------------------- */ 
.button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.button:hover { 
text-decoration: none; 
} 
.button:active { 
position: relative; 
top: 1px; 
} 
.bigrounded { 
-webkit-border-radius: 2em; 
-moz-border-radius: 2em; 
border-radius: 2em; 
} 
.medium { 
font-size: 12px; 
padding: .4em 1.5em .42em; 
} 
.small { 
font-size: 11px; 
padding: .2em 1em .275em; 
} 
/* color styles 
---------------------------------------------- */ 
/* black */ 
.black { 
color: #d7d7d7; 
border: solid 1px #333; 
background: #333; 
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); 
background: -moz-linear-gradient(top, #666, #000); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#666666&#39;, endColorstr=&#39;#000000&#39;); 
} 
.black:hover { 
background: #000; 
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); 
background: -moz-linear-gradient(top, #444, #000); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#444444&#39;, endColorstr=&#39;#000000&#39;); 
} 
.black:active { 
color: #666; 
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); 
background: -moz-linear-gradient(top, #000, #444); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#666666&#39;); 
} 
/* gray */ 
.gray { 
color: #e9e9e9; 
border: solid 1px #555; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 
background: -moz-linear-gradient(top, #888, #575757); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#888888&#39;, endColorstr=&#39;#575757&#39;); 
} 
.gray:hover { 
background: #616161; 
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); 
background: -moz-linear-gradient(top, #757575, #4b4b4b); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#757575&#39;, endColorstr=&#39;#4b4b4b&#39;); 
} 
.gray:active { 
color: #afafaf; 
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); 
background: -moz-linear-gradient(top, #575757, #888); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#575757&#39;, endColorstr=&#39;#888888&#39;); 
} 
/* white */ 
.white { 
color: #606060; 
border: solid 1px #b7b7b7; 
background: #fff; 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); 
background: -moz-linear-gradient(top, #fff, #ededed); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ffffff&#39;, endColorstr=&#39;#ededed&#39;); 
} 
.white:hover { 
background: #ededed; 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); 
background: -moz-linear-gradient(top, #fff, #dcdcdc); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ffffff&#39;, endColorstr=&#39;#dcdcdc&#39;); 
} 
.white:active { 
color: #999; 
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); 
background: -moz-linear-gradient(top, #ededed, #fff); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ededed&#39;, endColorstr=&#39;#ffffff&#39;); 
} 
/* orange */ 
.orange { 
color: #fef4e9; 
border: solid 1px #da7c0c; 
background: #f78d1d; 
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
background: -moz-linear-gradient(top, #faa51a, #f47a20); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;); 
} 
.orange:hover { 
background: #f47c20; 
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
background: -moz-linear-gradient(top, #f88e11, #f06015); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;); 
} 
.orange:active { 
color: #fcd3a5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
background: -moz-linear-gradient(top, #f47a20, #faa51a); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;); 
} 
/* red */ 
.red { 
color: #faddde; 
border: solid 1px #980c10; 
background: #d81b21; 
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); 
background: -moz-linear-gradient(top, #ed1c24, #aa1317); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ed1c24&#39;, endColorstr=&#39;#aa1317&#39;); 
} 
.red:hover { 
background: #b61318; 
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); 
background: -moz-linear-gradient(top, #c9151b, #a11115); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#c9151b&#39;, endColorstr=&#39;#a11115&#39;); 
} 
.red:active { 
color: #de898c; 
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); 
background: -moz-linear-gradient(top, #aa1317, #ed1c24); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#aa1317&#39;, endColorstr=&#39;#ed1c24&#39;); 
} 
/* blue */ 
.blue { 
color: #d9eef7; 
border: solid 1px #0076a3; 
background: #0095cd; 
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
background: -moz-linear-gradient(top, #00adee, #0078a5); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00adee&#39;, endColorstr=&#39;#0078a5&#39;); 
} 
.blue:hover { 
background: #007ead; 
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
background: -moz-linear-gradient(top, #0095cc, #00678e); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0095cc&#39;, endColorstr=&#39;#00678e&#39;); 
} 
.blue:active { 
color: #80bed6; 
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
background: -moz-linear-gradient(top, #0078a5, #00adee); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0078a5&#39;, endColorstr=&#39;#00adee&#39;); 
} 
/* rosy */ 
.rosy { 
color: #fae7e9; 
border: solid 1px #b73948; 
background: #da5867; 
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); 
background: -moz-linear-gradient(top, #f16c7c, #bf404f); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f16c7c&#39;, endColorstr=&#39;#bf404f&#39;); 
} 
.rosy:hover { 
background: #ba4b58; 
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)); 
background: -moz-linear-gradient(top, #cf5d6a, #a53845); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#cf5d6a&#39;, endColorstr=&#39;#a53845&#39;); 
} 
.rosy:active { 
color: #dca4ab; 
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)); 
background: -moz-linear-gradient(top, #bf404f, #f16c7c); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#bf404f&#39;, endColorstr=&#39;#f16c7c&#39;); 
} 
/* green */ 
.green { 
color: #e8f0de; 
border: solid 1px #538312; 
background: #64991e; 
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); 
background: -moz-linear-gradient(top, #7db72f, #4e7d0e); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#7db72f&#39;, endColorstr=&#39;#4e7d0e&#39;); 
} 
.green:hover { 
background: #538018; 
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); 
background: -moz-linear-gradient(top, #6b9d28, #436b0c); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#6b9d28&#39;, endColorstr=&#39;#436b0c&#39;); 
} 
.green:active { 
color: #a9c08c; 
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); 
background: -moz-linear-gradient(top, #4e7d0e, #7db72f); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#4e7d0e&#39;, endColorstr=&#39;#7db72f&#39;); 
} 
/* pink */ 
.pink { 
color: #feeef5; 
border: solid 1px #d2729e; 
background: #f895c2; 
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)); 
background: -moz-linear-gradient(top, #feb1d3, #f171ab); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#feb1d3&#39;, endColorstr=&#39;#f171ab&#39;); 
} 
.pink:hover { 
background: #d57ea5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); 
background: -moz-linear-gradient(top, #f4aacb, #e86ca4); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f4aacb&#39;, endColorstr=&#39;#e86ca4&#39;); 
} 
.pink:active { 
color: #f3c3d9; 
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)); 
background: -moz-linear-gradient(top, #f171ab, #feb1d3); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f171ab&#39;, endColorstr=&#39;#feb1d3&#39;); 
} 
</style> 
</head> 
<body> 
<h1 id="a-nbsp-href-http-www-webdesignerwall-com-tutorials-css-gradient-buttons-CSS-nbsp-Gradient-nbsp-Buttons-a"><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3 Gradient Buttons</a></h1> 
<p><em>by</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p> 
<p> 
<a href="#" class="button black">Rectangle</a> or 
<a href="#" class="button black bigrounded">Rounded</a> Can be 
<a href="#" class="button black medium">Medium</a> or 
<a href="#" class="button black small">Small</a> 
<input class="button black" type="button" value="Input Element" /> 
<button class="button black">Button Tag</button> 
<span class="button black">Span</span> 
<p class="button black">p</p> 
<p class="button black">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button gray">Gray</a> 
<a href="#" class="button gray bigrounded">Rounded</a> 
<a href="#" class="button gray medium">Medium</a> 
<a href="#" class="button gray small">Small</a> 
<input class="button gray" type="button" value="Input Element" /> 
<button class="button gray">Button Tag</button> 
<span class="button gray">Span</span> 
<p class="button gray">p</p> 
<p class="button gray">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button white">White</a> 
<a href="#" class="button white bigrounded">Rounded</a> 
<a href="#" class="button white medium">Medium</a> 
<a href="#" class="button white small">Small</a> 
<input class="button white" type="button" value="Input Element" /> 
<button class="button white">Button Tag</button> 
<span class="button white">Span</span> 
<p class="button white">p</p> 
<p class="button white">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button orange">Orange</a> 
<a href="#" class="button orange bigrounded">Rounded</a> 
<a href="#" class="button orange medium">Medium</a> 
<a href="#" class="button orange small">Small</a> 
<input class="button orange" type="button" value="Input Element" /> 
<button class="button orange">Button Tag</button> 
<span class="button orange">Span</span> 
<p class="button orange">p</p> 
<p class="button orange">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button red">Red</a> 
<a href="#" class="button red bigrounded">Rounded</a> 
<a href="#" class="button red medium">Medium</a> 
<a href="#" class="button red small">Small</a> 
<input class="button red" type="button" value="Input Element" /> 
<button class="button red">Button Tag</button> 
<span class="button red">Span</span> 
<p class="button red">p</p> 
<p class="button red">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button blue">Blue</a> 
<a href="#" class="button blue bigrounded">Rounded</a> 
<a href="#" class="button blue medium">Medium</a> 
<a href="#" class="button blue small">Small</a> 
<input class="button blue" type="button" value="Input Element" /> 
<button class="button blue">Button Tag</button> 
<span class="button blue">Span</span> 
<p class="button blue">p</p> 
<p class="button blue">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button rosy">Rosy</a> 
<a href="#" class="button rosy bigrounded">Rounded</a> 
<a href="#" class="button rosy medium">Medium</a> 
<a href="#" class="button rosy small">Small</a> 
<input class="button rosy" type="button" value="Input Element" /> 
<button class="button rosy">Button Tag</button> 
<span class="button rosy">Span</span> 
<p class="button rosy">p</p> 
<p class="button rosy">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button green">Green</a> 
<a href="#" class="button green bigrounded">Rounded</a> 
<a href="#" class="button green medium">Medium</a> 
<a href="#" class="button green small">Small</a> 
<input class="button green" type="button" value="Input Element" /> 
<button class="button green">Button Tag</button> 
<span class="button green">Span</span> 
<p class="button green">p</p> 
<p class="button green">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
<p> 
<a href="#" class="button pink">Pink</a> 
<a href="#" class="button pink bigrounded">Rounded</a> 
<a href="#" class="button pink medium">Medium</a> 
<a href="#" class="button pink small">Small</a> 
<input class="button pink" type="button" value="Input Element" /> 
<button class="button pink">Button Tag</button> 
<span class="button pink">Span</span> 
<p class="button pink">p</p> 
<p class="button pink">P Tag</p> 
<h3 id="H">H3</h3> 
</p> 
</body> 
</html>


以上がこの記事の全内容です。その他の関連コンテンツについては、ご注目ください。 PHP中国語ウェブサイトへ！

関連する推奨事項:

div 模倣チェックボックスフォームスタイルの美化と機能


CSS の使用方法 スプライトは、1 つの写真にたくさんの小さな写真を配置します


以上がCSS スタイルを使用して作成された美しいボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますTailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前ByDDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前ByDDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前ByDDD
KB5055523を修正する方法Windows 11にインストールできませんか？
2週間前ByDDD
もっと見る

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

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

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7719
15
Java チュートリアル
1641
14
CakePHP チュートリアル
1396
52
Laravel チュートリアル
1289
25
PHP チュートリアル
1233
29
もっと見る