Bootstrap 超酷3D按钮设计效果 - 小风博客-

小风科技

专业的
资源分享站
首页>> 前端教程 >>Bootstrap 超酷3D按钮设计效果 - 小风博客
2019-12-29
分类: 前端教程

Bootstrap 超酷3D按钮设计效果

文章作者:小风
手机扫码查看

这是一款基于 Bootstrap 的超酷 3D 按钮设计效果。该 3D 按钮通过在按钮底部设置阴影效果来形成 3D 效果,并且在鼠标滑过按钮时,按钮有下凹的动画,效果非常的酷。HTML 结构这个 3D......

这是一款基于 Bootstrap 的超酷 3D 按钮设计效果。该 3D 按钮通过在按钮底部设置阴影效果来形成 3D 效果,并且在鼠标滑过按钮时,按钮有下凹的动画,效果非常的酷。

HTML 结构

这个 3D 按钮效果采用 Bootstrap 的按钮样式,你可以设置各种类型的 boostrap 按钮。例如下面是一组尺寸为 sm 的小按钮。

  1. <div class="row pad-15">
  2.     <div class="col-sm-3">
  3.         <a href="#" class="btn btn-sm blue">3D button</a>
  4.     </div>
  5.  
  6.     <div class="col-sm-3">
  7.         <a href="#" class="btn btn-sm light-brown">3D button</a>
  8.     </div>
  9.  
  10.     <div class="col-sm-3">
  11.         <a href="#" class="btn btn-sm light-green">3D button</a>
  12.     </div>
  13.  
  14.     <div class="col-sm-3">
  15.         <a href="#" class="btn btn-sm light-orange">3D button</a>
  16.     </div>
  17. </div>

CSS 样式

首先为按钮添加一些通用样式:

  1. .btn:hover, .btn:focus{
  2.     outline: none;
  3.     color:#fff;
  4. }
  5. .btn{
  6.     text-transform: capitalize;
  7.     color:#fff;
  8.     padding: 14px 20px;
  9. }
  10. .btn:hover{
  11.     color:#fff;
  12. }
  13. .btn-sm{
  14.     padding: 11px 16px;
  15.     border-radius: 5px;
  16. }
  17. .btn-lg{
  18.     font-size: 15px;
  19. }
  20. .button-left > i{
  21.     margin-left: 7px;
  22. }
  23. .button-right > i{
  24.     margin-right: 7px;
  25. }

class 类 blue、light-brown、light-green 和 light-orange 为几种预定义的按钮颜色。在按钮的底部,通过 box-shadow 首先为按钮添加阴影效果。按钮的定位方式为相对定位,并为所有的 CSS 动画设置 0.2 秒的 ease-in-out 效果过渡动画。

  1. .blue,
  2. .light-brown,
  3. .light-green,
  4. .light-orange{
  5.     background: #0088cc;
  6.     box-shadow:0 4px 0 #006394;
  7.     transition:all 0.2s ease-in-out 0s;
  8.     position: relative;
  9.     top:0;
  10. }
  11. .light-brown{
  12.     background: #cec2ab;
  13.     box-shadow: 0 4px 0 #b9a888;
  14. }
  15. .light-green{
  16.     background: #75d69c;
  17.     box-shadow:0 4px 0 #4ac97d;
  18.     border-radius: 25px;
  19. }
  20. .light-orange{
  21.     background: #f79468;
  22.     box-shadow: 0 4px 0 #f46e33;
  23. }                 
  24.  
  25. 在鼠标滑过按钮的时候,按钮的背景颜色和阴影颜色被修改。
  26. .blue:hover,
  27. .light-brown:hover,
  28. .light-green:hover,
  29. .light-orange:hover{
  30.     top:2px;
  31.     box-shadow:0 2px 0 #006394;
  32. }
  33. .light-brown:hover{
  34.     box-shadow: 0 2px 0 #b9a888;
  35. }
  36. .light-green:hover{
  37.     box-shadow:0 2px 0 #4ac97d;
  38. }
  39. .light-orange:hover{
  40.     box-shadow: 0 2px 0 #f46e33;
  41. }


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:小风博客 » Bootstrap 超酷3D按钮设计效果

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)

做一个有价值的人