您现在的位置是：网站首页>CSS3|HTML5CSS3|HTML5

CSS的效果实例:具有渐变背景色和鼠标悬停时变换效果的按钮

程大白2022-07-01【CSS3|HTML5】人已围观

简介个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。

当然可以。以下是一个简单的CSS效果实例，我们将创建一个具有渐变背景色和鼠标悬停时变换效果的按钮。

首先，是HTML部分，我们定义一个按钮：




	html复制代码



	

		
			

				
					

						 

						
				
					<!DOCTYPE html> 
			

			

				
					

						 

						
				
					<html lang="en"> 
			

			

				
					

						 

						
				
					<head> 
			

			

				
					

						 

						
				
					<meta charset="UTF-8"> 
			

			

				
					

						 

						
				
					<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
			

			

				
					

						 

						
				
					<title>CSS Effect Example</title> 
			

			

				
					

						 

						
				
					<link rel="stylesheet" href="styles.css"> 
			

			

				
					

						 

						
				
					</head> 
			

			

				
					

						 

						
				
					<body> 
			

			

				
					

						 

						
				
					<button class="gradient-button">Hover Me!</button> 
			

			

				
					

						 

						
				
					</body> 
			

			

				
					

						 

						
				
					</html>
			

		
	





	接下来是CSS部分（styles.css文件）：





	css复制代码



	

		
			

				
					

						 

						
				
					body { 
			

			

				
					

						 

						
				
					display: flex; 
			

			

				
					

						 

						
				
					justify-content: center; 
			

			

				
					

						 

						
				
					align-items: center; 
			

			

				
					

						 

						
				
					height: 100vh; 
			

			

				
					

						 

						
				
					background-color: #f0f0f0; 
			

			

				
					

						 

						
				
					} 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					.gradient-button { 
			

			

				
					

						 

						
				
					padding: 10px 20px; 
			

			

				
					

						 

						
				
					font-size: 16px; 
			

			

				
					

						 

						
				
					color: #fff; 
			

			

				
					

						 

						
				
					background-image: linear-gradient(to right, #ff7e5f, #feb47b); 
			

			

				
					

						 

						
				
					border: none; 
			

			

				
					

						 

						
				
					border-radius: 5px; 
			

			

				
					

						 

						
				
					cursor: pointer; 
			

			

				
					

						 

						
				
					transition: transform 0.3s ease; 
			

			

				
					

						 

						
				
					} 
			

			

				
					

						 

						
				
					 
			

			

				
					

						 

						
				
					.gradient-button:hover { 
			

			

				
					

						 

						
				
					transform: scale(1.1); 
			

			

				
					

						 

						
				
					}
			

		
	





	在这个例子中，我们首先设置了整个页面的背景色，并使按钮居中显示。按钮（.gradient-button）具有渐变背景色，从#ff7e5f到#feb47b。当鼠标悬停在按钮上时，它会通过transform: scale(1.1);稍微放大，创建一个视觉上的反馈效果。transition: transform 0.3s ease;属性确保变换效果是平滑的。


                     
        
        
很赞哦！ (74)

        

          
上一篇：上一篇：没有了 

          
下一篇：下一篇：CSS的效果实例:宽屏图片手风琴切换特效 

        

      

      
            
      
  
      
    

    

      
相关文章

      
    


    

      
文章评论

      
    
      

    

  

  
  

    

      
点击排行

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
本栏推荐

      
6条网页设计配色原则,让你秒变配色高手

      
    

    

      
    
        
      

    

    

      
标签云

      
    

    

      
猜你喜欢

      
    

    

      
    
        
      

    

    

      
站点信息

      
    
        
  • 建站时间：2018-10-24
    • 
        
  • 网站程序：cms
    • 
        
  • 主题模板：杨青青的《今夕何夕》
    • 
        
  • 文章统计：299条
    • 
        
  • 文章评论：490条
    • 
        
  • 统计数据：百度统计
    • 
        
  • 微信公众号：扫描二维码，关注我们
    •