CSS拟物按钮是一种非常流行的UI/UX设计元素,能够给网站带来简洁、时尚的感觉。接下来,我们为您带来了一些常用的CSS拟物按钮样式。
/* 基础拟物按钮 */.btn {display: inline-block;padding: 10px 20px;background-color: #fff;border: 2px solid #ccc;border-radius: 10px;box-shadow: 3px 3px 6px #ccc;cursor: pointer;transition: all .2s ease-in-out;}.btn:hover {background-color: #f2f2f2;box-shadow: 3px 3px 6px #ddd;transform: translateY(-2px);}/* 扁平拟物按钮 */.flat-btn {display: inline-block;padding: 10px 20px;background-color: #fff;border: 2px solid #ccc;border-radius: 10px;box-shadow: none;cursor: pointer;transition: all .2s ease-in-out;}.flat-btn:hover {background-color: #f2f2f2;box-shadow: none;transform: translateY(-2px);}/* 3D拟物按钮 */.btn-3d {display: inline-block;padding: 10px 20px;background-color: #fff;border: none;border-radius: 10px;box-shadow: 3px 3px 6px #ccc;cursor: pointer;transition: all .2s ease-in-out;}.btn-3d:hover {background-color: #f2f2f2;box-shadow: 3px 3px 6px #ccc;transform: translateY(-2px);}/* 背景渐变拟物按钮 */.btn-gradient {display: inline-block;padding: 10px 20px;background-image: linear-gradient(to right, #5c6bc0, #42a5f5);border: 2px solid #eee;border-radius: 10px;box-shadow: 3px 3px 6px #ccc;cursor: pointer;transition: all .2s ease-in-out;color: #fff;}.btn-gradient:hover {background-image: linear-gradient(to right, #42a5f5, #5c6bc0);box-shadow: 3px 3px 6px #ddd;transform: translateY(-2px);}以上是一些常用的CSS拟物按钮样式,可以根据页面需要进行选择使用。希望本文对您有所帮助。
上一篇:css抠图的代码
下一篇:javascript中删除元素属性值









