怎么用css3實現顏色漸變按鈕

本篇內容介紹了“怎么用css3實現顏色漸變按鈕”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　之前為大家分享很多純css3實現的實用按鈕，今天給大家帶來一款純css3實現的顏色漸變按鈕。這款按鈕的邊框和文字的顏色通過css3實現兩種顏色的漸變，效果非常好看，一起看下效果圖：

　　實現的代碼。

　　html代碼：

XML/HTML Code復制內容到剪貼板

1. <div class="container">  

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

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

4.        <a target="_blank" class="btn blue" href="http://www.5655pk.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實現顏色漸變按鈕”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！