css3圓角樣式中自定義按鈕樣式是怎樣的

css3圓角樣式中自定義按鈕樣式是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了東安免費(fèi)建站歡迎大家使用！

代碼如下:

<div class="main">
       <!--css3自定義漸變圓角按鈕樣式-->
           <input type="submit" class="btn-style-01" value="提交" />
       <!--css3自定義漸變圓角按鈕樣式-->
</div></p> <p><style type="text/css">
.btn-style-01{
   border-style:none;
   padding:8px 30px;
   line-height:24px;
   color:#fff;
   font:16px "Microsoft YaHei", Verdana, Geneva, sans-serif;
   cursor:pointer;
   border:1px #ae7d0a solid;
   -webkit-box-shadow:inset 0px 0px 1px #fff;
   -moz-box-shadow:inset 0px 0px 1px #fff;
   box-shadow:inset 0px 0px 1px #fff;/*內(nèi)發(fā)光效果*/
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;/*邊框圓角*/
   text-shadow:1px 1px 0px #b67f01;/*字體陰影效果*/
   background-color:#feb100;
   background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#feb100), to(#e8a201));
   background-image: -webkit-linear-gradient(top, #feb100 0%, #e8a201 100%);
   background-image: -moz-linear-gradient(top, #feb100 0%, #e8a201 100%);
   background-image: -ms-linear-gradient(top, #feb100 0%, #e8a201 100%);
   background-image: -o-linear-gradient(top, #feb100 0%, #e8a201 100%);
   background-image: linear-gradient(top, #feb100 0%, #e8a201 100%);/*顏色漸變效果*/
}
.btn-style-01:hover {
   background-color:#e8a201;
   background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#e8a201), to(#feb100));
   background-image: -webkit-linear-gradient(top, #e8a201 0%, #feb100 100%);
   background-image: -moz-linear-gradient(top, #e8a201 0%, #feb100 100%);
   background-image: -ms-linear-gradient(top, #e8a201 0%, #feb100 100%);
   background-image: -o-linear-gradient(top, #e8a201 0%, #feb100 100%);
   background-image: linear-gradient(top, #e8a201 0%, #feb100 100%);
}
</style>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前題目：css3圓角樣式中自定義按鈕樣式是怎樣的
分享URL：http://muchs.cn/article48/gdcgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、小程序開(kāi)發(fā)、域名注冊(cè)、建站公司、網(wǎng)站維護(hù)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)