非常漂亮而且很实用的button按钮效果

最新推荐文章于 2024-08-17 12:53:28 发布

hai7425

最新推荐文章于 2024-08-17 12:53:28 发布

阅读量526

点赞数

分类专栏：通达OA CSS笔记

本文链接：https://blog.csdn.net/hai7425/article/details/119325526

版权

通达OA 同时被 2 个专栏收录

108 篇文章 15 订阅

订阅专栏

CSS笔记

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>非常实用的button按钮效果</title>

<style>
.button {    background-color: #4CAF50; /* Green */    border: none;    color: white;    padding: 16px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;    cursor: pointer;}
 .button1 {    background-color: #4CAF50;    color: black;     border: 2px solid #4CAF50;
 border-radius:3px;}
 .button1:hover {    background-color: #4CAF50;    color: white;} .button2 {    background-color: white;     color: black;     border: 2px solid #008CBA;}
  .button2:hover {    background-color: #008CBA;    color: white;} 
</style>
</head>

<body>
<button class='button button1'>Green</button>
<button class='button button2'>Blue</button>
</body>
</html>