一个漂亮的渐变按钮（实用）

最新推荐文章于 2023-06-09 22:40:25 发布

原创最新推荐文章于 2023-06-09 22:40:25 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

本文介绍如何使用CSS3创建具有从右到左渐变效果的按钮，包含具体代码实现，展示了不同浏览器前缀下渐变背景的兼容写法，以及按钮的样式设置。

参考：CSS3之渐变色按钮

效果图：

html

<button class='my_btn'> abc </button>

css

.my_btn 
{ 
    background: linear-gradient(right,#FE48D3,#BF3DC9); 
    background: -ms-linear-gradient(right,#FE48D3,#BF3DC9); 
    background: -webkit-linear-gradient(right,#FE48D3,#BF3DC9); 
    background: -o-linear-gradient(right,#FE48D3,#BF3DC9); 
    background: -moz-linear-gradient(right,#FE48D3,#BF3DC9);

	 width:200px; 
   height:2em; 
   border-radius:25px; 
   text-align: center; 
   vertical-align: middle; 
   margin-left: 10%; 
   font-size:1.6em; 
   color: white;
   z-index: 999;  
}