この問題を何度もグーグルで調べてみましたが、驚くべきことに結果が見つかりません。
全体に 1 ピクセルの暗い境界線があるボタンを作成しようとしていますが、内側に 1 ピクセルのハイライト ボーダートップもあります。
この画像は、私が達成しようとしているもののサンプルです。CSS3/HTMLだけでこれを行う方法はありますか?
現在の HTML:
<a href="register" title="Register Now" class="blue_button">Register Now</a>
現在の CSS:
.blue_button {
background-color: #019df6;
background: -moz-linear-gradient(top, #019df6 0%, #027bc1 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019df6), color-stop(99%,#027bc1));
background: -webkit-linear-gradient(top, #019df6 0%,#027bc1 99%);
background: -o-linear-gradient(top, #019df6 0%,#027bc1 99%);
background: -ms-linear-gradient(top, #019df6 0%,#027bc1 99%);
background: linear-gradient(to bottom, #019df6 0%,#027bc1 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#019df6', endColorstr='#027bc1',GradientType=0 );
border:1px solid #0171b1;
padding:10px 30px;
font-weight:600;
font-size:150%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color:#fff;
text-decoration:none;
}