1
これらのボタンは「16進数」でしか動作しませんが、imはアイコンに制限されているので素晴らしいフォントを使用できます。しかし、私が変更しようとすると、バックグラウンドが一番下に行く前に、そして私が変更したものは何も動かなくなります。CSSボタンは素晴らしいフォントでは機能しませんが、16進数では完璧に動作します
相続人buttons.css：
/*LOGIN BUTTON*/
.button {
cursor: pointer;
display: inline-block;
white-space: nowrap;
background-color: #1d1d1d;
-webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
-moz-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid black;
color:#05c7f7;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
}
.button:hover {
background-color: #ddd;
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.button:active {
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button:focus {
outline: 0;
background-color: #1d1d1d;
}
.button:before {
float: left;
color:#fff;
-webkit-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5,199,247,0.5), inset 0 0 1px 1px #05c7f7;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
pointer-events: none;
}
/*REGISTER BUTTON*/
.button2 {
cursor: pointer;
display: inline-block;
white-space: nowrap;
background-color: #1d1d1d;
-webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
-moz-box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid black;
color:#05c7f7;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
}
.button2:hover {
background-color: #ddd;
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.button2:active {
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button2:focus {
outline: 0;
background-color: #1d1d1d;
}
.button2:before {
float: left;
color:#fff;
background-image: url("/images/background/stripe.png");
border-right:1px solid black;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .2);
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}
hexadecimal.css：
@charset "utf-8";
/* Hexadecimal entities for the icons */
.add:before {
content: "\271A";
}
.edit:before {
content: "\270E";
}
.delete:before {
content: "\2718";
}
.save:before {
content: "\2714";
}
.email:before {
content: "\2709";
}
.like:before {
content: "\2764";
}
.next:before {
content: "\279C";
}
.star:before {
content: "\2605";
}
.spark:before {
content: "\2737";
}
.play:before {
content: "\25B6";
}
.register:before {
content: "\f044";
}
.login:before {
content: "\f044";
}
とコールするボタン：
<div style="padding:30px; margin:0 auto; text-align: center;">
<a class="button" href="/" >Button</a>
<a class="button play" href="/" >Login</a>
<a class="button2 play" href="/" >Register</a>
<a class="button2 play" href="/" >Signout</a>
</div><br/>
<div style="padding:30px; margin:0 auto; text-align: center;">
<a class="button" href="/" >Button</a>
<a class="button" href="/" ><i class="fa fa-lock"></i> Login</a>
<a class="button2" href="/" ><i class="fa fa-pencil-square-o"></i> Register</a>
<a class="button2" href="/" ><i class="fa fa-sign-in"></i> Signout</a>
</div>
はいIVEはこれを試してみましたが、それは唯一の正方形が表示されます。 16進数は、\ 2で始まるものだけですが、iveもクラスを使ってCSSを変更しようとしました。before：i：beforeの前に、背景の画像はボタンの一番下まで届きません。 – Martin
空白の正方形が表示され、cssは未定義のアイコンを参照するか、そのアイコンはもう使用できません。私はあなたのコードを実行しようとした[フォント - 素晴らしいCSS（https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css）を追加し、私は表示されません空のボックス。 [Fiddle]（https://jsfiddle.net/oa8wyvwf/）を参照してください。 –
@ JF-Mechsはい、動作しますが、作業ボタンと比較すると、クラス内で見ることができるように、正方形内にないことがわかります= "ボタンの再生"ここで "再生"は青い四角内のアイコンになります – Martin