ホームページ > 記事 > ウェブフロントエンド > CSSでグラデーションボタンの効果を実現(コード例)
この記事では、グラデーション カラー ボタンを作成する効果について説明します。興味のある方は、具体的な内容をご覧ください。
早速、本題に入りましょう~
グラデーション ボタンのコードは次のとおりです:
button-gradient。 css (css ファイル)
.gradientButton{ border:1px solid #ff6a00; width:100px; height:28px; background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/ }
button-gradient.html (html ファイル)
<!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="button-gradient.css" /> </head> <body> <div><button type="submit" class="gradientButton">Button</button></div> <hr /> </body> </html>
グラデーション ボタンの効果は次のとおりです:
##アイコン付きのグラデーション ボタン
このコードは、グラデーション ボタンにアイコンを表示します。 コードは次のとおりです。 image-button-gradient.css (CSS ファイル)#buttonImage { background-image:url('/img/search.png'); display:inline-block; margin-top:2px; width:16px; height:16px; } .flatbutton{ border:1px solid #3079ed; width:100px; height:28px; background:linear-gradient(to bottom, #9bcfff,#4683ea); }image-button-gradient.html (HTML ファイル)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="image-button-gradient.css" /> </head> <body> <button class="flatbutton"><span id="buttonImage"></span></button> </body> </html>説明: 前の文字列タイトルのグラデーション ボタンとほぼ同じです。画像を表示するには、buttonタグ内にspanタグを記述します。 効果は次のとおりです:
以上がCSSでグラデーションボタンの効果を実現(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。