怎么用css3实现颜色渐变按钮

本篇内容介绍了“怎么用css3实现颜色渐变按钮”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　之前为大家分享很多纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class="container">  

2.        <a target="_blank" class="btn green" href="https://www.yisu.com/"><span>Nominate Yourself</span></a>  

3.        <a target="_blank" class="btn orange" href="https://www.yisu.com/"><span>Nominate Someone</span></a>  

4.        <a target="_blank" class="btn blue" href="https://www.yisu.com/"><span>Buy Tickets Now</span></a>  

5.    </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .btn   

2.         {   

3.             display: inline-block;   

4.             margin: 1em 0;   

5.             padding: 1em 2em;   

6.             background: transparent;   

7.             border: 2px;   

8.             border-radius: 3px;   

9.             font-weight: 400;   

10.             text-align: center;   

11.         }   

12.         .btn.green  

13.         {   

14.             box-shadow: 0 1px 0 1px rgba(43, 220, 146, 0.25), 0 -1px 0 1px rgba(129, 214, 106, 0.25), 1px 0 0 1px rgba(43, 220, 146, 0.25), -1px 0 0 1px rgba(129, 214, 106, 0.25), 1px -1px 0 1px rgba(86, 217, 126, 0.5), -1px 1px 0 1px rgba(86, 217, 126, 0.5), 1px 1px 0 1px rgba(0, 223, 166, 0.75), -1px -1px 0 1px rgba(173, 211, 86, 0.75);   

15.         }   

16.         .btn.green span   

17.         {   

18.             background: -webkit-linear-gradient(left, #add356, #00dfa6);   

19.             -webkit-background-clip: text;   

20.             -webkit-text-fill-color: transparent;   

21.         }   

22.         .btn.orange   

23.         {   

24.             box-shadow: 0 1px 0 1px rgba(255, 102, 43, 0.25), 0 -1px 0 1px rgba(255, 169, 69, 0.25), 1px 0 0 1px rgba(255, 102, 43, 0.25), -1px 0 0 1px rgba(255, 169, 69, 0.25), 1px -1px 0 1px rgba(255, 136, 56, 0.5), -1px 1px 0 1px rgba(255, 136, 56, 0.5), 1px 1px 0 1px rgba(255, 69, 31, 0.75), -1px -1px 0 1px rgba(255, 203, 82, 0.75);   

25.         }   

26.         .btn.orange span   

27.         {   

28.             background: -webkit-linear-gradient(left, #ffcb52, #ff451f);   

29.             -webkit-background-clip: text;   

30.             -webkit-text-fill-color: transparent;   

31.         }   

32.         .btn.blue  

33.         {   

34.             -webkit-border-image: -webkit-linear-gradient(left, #3dade9, #bf2fcb) round;   

35.             border-image-slice: 1;   

36.         }   

37.         .btn.blue span   

38.         {   

39.             background: -webkit-linear-gradient(left, #3dade9, #bf2fcb);   

40.             -webkit-background-clip: text;   

41.             -webkit-text-fill-color: transparent;   

42.         }   

43.         .btn:nth-of-type(1)   

44.         {   

45.             float: left;   

46.         }   

47.         .btn:nth-of-type(2)   

48.         {   

49.             float: rightright;   

50.         }   

51.         .btn:nth-of-type(3)   

52.         {   

53.             width: 100%;   

54.             clear: left;   

55.             padding: .75em;   

56.             font-size: 3em;   

57.             font-weight: 100;   

58.             line-height: 1;   

59.             letter-spacing: 1px;   

60.         }   

61.            

62.         *   

63.         {   

64.             -moz-box-sizing: border-box;   

65.             box-sizing: border-box;   

66.         }   

67.            

68.         body   

69.         {   

70.             font: normal 1em 'Helvetica Neue' , Helvetica, sans-serif;   

71.             background: #1d2025;   

72.             -webkit-font-smoothing: antialiased;   

73.             text-rendering: optimizeLegibility;   

74.         }   

75.            

76.         .container   

77.         {   

78.             width: 60%;   

79.             margin: auto;   

80.             position: absolute;   

81.             top: 50%;   

82.             left: 50%;   

83.             -webkit-transform: translate(-50%, -50%);   

84.             -ms-transform: translate(-50%, -50%);   

85.             transform: translate(-50%, -50%);   

86.         }   

87.         .container:after   

88.         {   

89.             display: table;   

90.             content: '';   

91.             clear: both;   

92.         }   

93.            

94.         a   

95.         {   

96.             color: inherit;   

97.             text-decoration: none;   

98.         }   

99.            

100.         h2.method1   

101.         {   

102.             background: -webkit-linear-gradient(left, #ef0, #f00);   

103.             -webkit-background-clip: text;   

104.             -webkit-text-fill-color: transparent;   

105.         }  

“怎么用css3实现颜色渐变按钮”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！