CSSを使ってボタンの色を変える方法の解析例-CSSチュートリアル-php.cn

CSSを使ってボタンの色を変える方法の解析例

黄舟

リリース： 2017-07-22 14:30:23

オリジナル

3582 人が閲覧しました

まず、最終的なレンダリングを見てみましょう:

これが私たちの最大の目標です。興味があれば、読み続けてください。

まず、このボタンはCSS3.0の新しいスタイル属性を使用しています。ブラウザにコーナー円弧スタイルが表示されない場合は、ブラウザのバージョンが CSS3.0 の新しいスタイルをサポートしていないことを意味します。解決策は、ブラウザを最新のものにアップグレードすることです。私の知る限り、XP と Windows Server 2003 は IE8 までサポートしています (その効果がわかります)。IE をアップグレードしたくない場合は、Firefox などの IE ベースではないブラウザをダウンロードする必要があります。グーグル、オペラなど

さて、この先のくだらない話はさておき、美しいボタンの作り方を見てみましょう。

実際、ここでは CSS 疑似要素である hover を使用しています。

まず、ページに入力タイプのボタンを配置する必要があります。このボタンボタンに CSS スタイルを追加します。

具体的な CSS コードは次のとおりです:

.mybtn {
    width:86px;
    text-align:center;
    line-height:100%;
    padding-top:0.5em;
    padding-right:2em;
    padding-bottom:0.55em;
    padding-left:2em;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    margin-top:0px;
    margin-right:2px;
    margin-bottom:0px;
    margin-left:2px;
    vertical-align:text-bottom;
    display:inline-block;
    cursor:pointer;
    zoom:1;
    outline-width:medium;
    outline-color:invert;
    font-size-adjust:none;
    font-stretch:normal;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
    box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    color:#fefee9;
    border-top-color:#da7c0c;
    border-right-color:#da7c0c;
    border-bottom-color:#da7c0c;
    border-left-color:#da7c0c;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    background-image:none;
    background-attachment:scroll;
    background-repeat:repeat;
    background-position-x:0%;
    background-position-y:0%;
    background-size:auto;
    background-origin:padding-box;
    background-clip:padding-box;
    background-color:#f78d1d;
}

ログイン後にコピー

具体的な CSS スタイルの説明については、CSS レベルを向上させることができる Baidu にアクセスしてください。 CSS のスキルは分からないが、この効果を使用したい場合は、ボタンの幅を変更し、ボタンの適切な幅に設定する必要があります。もう一つは背景色の置き換えです。

CSS スタイルと入力ボタンを記述したら、入力ボタンにクラスを追加するだけで済みます。

<input type="button" class="mybtn" value="我是按钮" />

ログイン後にコピー

これで、CSS の疑似要素 hover を使用する最後の部分ができました。

mybtn hover スタイルを記述します。コードは次のとおりです。

.mybtn:hover {
    background: #f47c20;
}

ログイン後にコピー

マウスが上に移動したときに背景色を変更するだけでよいため、ホバースタイルの属性を 1 つ変更するだけで済みます。

以上がCSSを使ってボタンの色を変える方法の解析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。