css圆角按钮样式代码
CSS圆角按钮样式让网站看起来更美观且亲切,下面是一些实例代码:
/* 基础样式 */.button {display: inline-block;padding: 10px 20px;font-size: 16px;font-weight: bold;text-align: center;text-decoration: none;color: #fff;background-color: #007bff;border-radius: 10px;cursor: pointer;}/* hover效果 */.button:hover {background-color: #0062cc;}/* active效果 */.button:active {background-color: #005cbf;}/* disabled状态 */.button:disabled {opacity: 0.5;cursor: not-allowed;}/* 不同尺寸的按钮 */.button-small {padding: 5px 10px;font-size: 14px;border-radius: 8px;}.button-large {padding: 15px 30px;font-size: 20px;border-radius: 12px;}/* 高亮按钮 */.button-highlight {background-color: #f5a623;}/* 深色按钮 */.button-secondary {background-color: #444444;}以上样式代码可以根据需要进行修改,比如更改颜色、尺寸、圆角大小等,可以大程度地满足网站设计的需求。
免责声明:本文内容来自用户上传并发布,站点仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。请核实广告和内容真实性,谨慎使用。