一、先来看下效果

二、实现方法及部分代码

1. 1. 第一步 在当前使用主题的function.php文件中添加以下代码

        此处内容已隐藏，请评论后刷新页面查看.

       

1. 1. 在主题CSS文件添加CSS样式

      /*彩色文本框样式 开始 */
      /* 1、图片在下载文件中
      2、图片路径请根据自己主题CSS文件位置设置相对路径
      */
      #dm_green_notice {
      color: #7da33c;
      background: #ecf2d6 url('../images/sc_notice.png') top left no-repeat;
      border: 1px solid #aac66d;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-left: 5px solid #7da33c;
      border-radius: 5px;
      }
      #dm_warn_notice {
      color: #ad9948;
      background: #fff4b9 url('../images/sc_warn.png') top left no-repeat;
      border: 1px solid #eac946;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-left: 5px solid #ad9948;
      border-radius: 5px;
      }
      #dm_erro_notice {
      color: #c66;
      background: #ffecea url('../images/sc_error.png') top left no-repeat;
      border: 1px solid #ebb1b1;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-left: 5px solid #c66;
      border-radius: 5px;
      }
      #dm_grey_notice {
      color: #777;
      background: #eaeaea url('../images/sc_tips.png') top left no-repeat;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-left: 5px solid #777;
      border-radius: 5px;
      }
      #dm_blue_notice {
      color: #1ba1e2;
      background: rgba(27, 161, 226, 0.26) url('../images/sc_blue.png') top left no-repeat;
      border: 1px solid #1ba1e2;
      overflow: hidden;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-left: 5px solid #1ba1e2;
      border-radius: 5px;
      }
      
      #dm_bluedashed_border {
      border:2px dashed rgb(41, 170, 227);
      background-color: rgb(248, 247, 245);
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-radius: 5px;
      }
      
      #dm_black_border {
      border-width: 1px 4px 4px 1px;
      border-style: solid;
      border-color: #3e3e3e;
      margin: 10px 0;
      padding: 15px 15px 15px 35px;
      border-radius: 5px;
      }
      
      #dm_lvb {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 5px solid #05B536;
      background: #FFF;
      border-radius: 5px;
      }
      #dm_redb {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-radius: 5px;
      border-left: 5px solid #ED0505;
      background: #FFF;
      border-radius: 5px;
      }
      #dm_organge {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 5px solid #EC8006;
      background: #FFF;
      border-radius: 5px;
      }
      
      #dm_pink {
      margin: 10px 0;
      padding: 10px 15px;
      border: 1px solid #e3e3e3;
      border-left: 5px solid pink;
      background: #FFF;
      border-radius: 5px;
      }
      
      /*彩色文本框样式 结束 */
      
      /*闪光按钮样式 开始 */
      [class*=sgbtn]{
          display:inline-block;
          text-indent:0;
          position:relative;
      color:#fff;
      padding:0 10px 0 10px;
      min-width:160px;
      height:38px;
      line-height:38px;
      opacity:.8;
      text-align:center;
      font-family:Ubuntu,sans-serif;
      font-size:15px;
      text-decoration:none;
      border-radius:2px;
      overflow:hidden;
      -webkit-transition:all .15s ease-in;
      transition:all .15s ease-in}
      
      [class*=sgbtn]:before{
      content:'';position:absolute;
      background:#fff;
      width:25px;
      height:50px;
      top:0;left:-45px;
      opacity:.3;
      -webkit-transition:all .25s ease-out;
      transition:all .25s ease-out;
      -webkit-transform:skewX(-25deg);
      transform:skewX(-25deg)
      }
      
      [class*=sgbtn]:hover{
      
      opacity:.65}
      
      [class*=sgbtn]:hover:before{width:45px;left:205px}
      .sgbtn_blue{color:#000;background:#1cb2f5}
      .sgbtn_red{color:#000;background:#C00}
      .sgbtn_orange{color:#000;background:#F90}
      .sgbtn_lv{color:#000;background:#096}
      a[class*=sgbtn]{color:#000}a[class*=sgbtn]:hover{color:#fff}
      /*闪光按钮样式 结束 */
      
      /*!彩色按钮样式 开始 */
      .greenbtn{
      -moz-box-shadow:0 10px 14px -7px #3e7327;
      -webkit-box-shadow:0 10px 14px -7px #3e7327;
      box-shadow:0 10px 14px -7px #3e7327;
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#77b55a),color-stop(1,#72b352));
      background:-moz-linear-gradient(top,#77b55a 5%,#72b352 100%);
      background:-webkit-linear-gradient(top,#77b55a 5%,#72b352 100%);
      background:-o-linear-gradient(top,#77b55a 5%,#72b352 100%);
      background:-ms-linear-gradient(top,#77b55a 5%,#72b352 100%);
      background:linear-gradient(to bottom,#77b55a 5%,#72b352 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',endColorstr='#72b352',GradientType=0);
      background-color:#77b55a;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      border-radius:4px;
      border:1px solid #4b8f29;
      display:inline-block;
      cursor:pointer;
      color:#fff !important;
      font-family:arial;
      font-size:13px;
      font-weight:bold;padding:6px
      12px;
      text-decoration:none;
      text-shadow:0 1px 0 #5b8a3c
      }
      
      .greenbtn:hover{
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#72b352),color-stop(1,#77b55a));
      background:-moz-linear-gradient(top,#72b352 5%,#77b55a 100%);
      background:-webkit-linear-gradient(top,#72b352 5%,#77b55a 100%);
      background:-o-linear-gradient(top,#72b352 5%,#77b55a 100%);
      background:-ms-linear-gradient(top,#72b352 5%,#77b55a 100%);
      background:linear-gradient(to bottom,#72b352 5%,#77b55a 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',endColorstr='#77b55a',GradientType=0);
      background-color:#72b352;
      }
      .greenbtn:active{
      position:relative;
      top:1px;
      }
      
      .bluebtn{
      -moz-box-shadow:inset 0 1px 0 0 #54a3f7;
      -webkit-box-shadow:inset 0 1px 0 0 #54a3f7;
      box-shadow:inset 0 1px 0 0 #54a3f7;
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#007dc1),color-stop(1,#0061a7));
      background:-moz-linear-gradient(top,#007dc1 5%,#0061a7 100%);
      background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7 100%);
      background:-o-linear-gradient(top,#007dc1 5%,#0061a7 100%);
      background:-ms-linear-gradient(top,#007dc1 5%,#0061a7 100%);
      background:linear-gradient(to bottom,#007dc1 5%,#0061a7 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1',endColorstr='#0061a7',GradientType=0);
      background-color:#007dc1;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid#124d77;
      display:inline-block;
      cursor:pointer;
      color:#fff !important;
      font-family:arial;
      font-size:13px;
      padding:6px 24px;
      text-decoration:none;
      text-shadow:0 1px 0 #154682
      }
      
      .bluebtn:hover{
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#0061a7),color-stop(1,#007dc1));
      background:-moz-linear-gradient(top,#0061a7 5%,#007dc1 100%);
      background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1 100%);
      background:-o-linear-gradient(top,#0061a7 5%,#007dc1 100%);
      background:-ms-linear-gradient(top,#0061a7 5%,#007dc1 100%);
      background:linear-gradient(to bottom,#0061a7 5%,#007dc1 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',endColorstr='#007dc1',GradientType=0);
      background-color:#0061a7;
      }
      
      .bluebtn:active{position:relative;top:1px;}
      
      .yellowbtn{
      -moz-box-shadow:inset 0 1px 0 0 #fff6af;
      -webkit-box-shadow:inset 0 1px 0 0 #fff6af;
      box-shadow:inset 0 1px 0 0 #fff6af;
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#ffec64),color-stop(1,#ffab23));
      background:-moz-linear-gradient(top,#ffec64 5%,#ffab23 100%);
      background:-webkit-linear-gradient(top,#ffec64 5%,#ffab23 100%);
      background:-o-linear-gradient(top,#ffec64 5%,#ffab23 100%);
      background:-ms-linear-gradient(top,#ffec64 5%,#ffab23 100%);
      background:linear-gradient(to bottom,#ffec64 5%,#ffab23 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',endColorstr='#ffab23',GradientType=0);
      background-color:#ffec64;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius:6px;
      border:1px solid #fa2;
      display:inline-block;
      cursor:pointer;
      color:#333 !important;
      font-family:arial;
      font-size:15px;
      font-weight:bold;
      padding:6px 24px;text-decoration:none;
      text-shadow:0 1px 0 #fe6
      }
      
      .yellowbtn:hover{
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#ffab23),color-stop(1,#ffec64));
      background:-moz-linear-gradient(top,#ffab23 5%,#ffec64 100%);
      background:-webkit-linear-gradient(top,#ffab23 5%,#ffec64 100%);
      background:-o-linear-gradient(top,#ffab23 5%,#ffec64 100%);
      background:-ms-linear-gradient(top,#ffab23 5%,#ffec64 100%);
      background:linear-gradient(to bottom,#ffab23 5%,#ffec64 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',endColorstr='#ffec64',GradientType=0);
      background-color:#ffab23;
      }
      
      .yellowbtn:active{position:relative;top:1px;}
      
      /*!彩色按钮样式 结束 */

三、代码文件下载效果

最终在编辑界面文本编辑界面，出现多个按键，根据需求添加内容即可