带有文本的类似切换按钮答案

【问题标题】：Toggle-like button with text带有文本的类似切换按钮
【发布时间】：2018-11-09 10:16:50
【问题描述】：

我正在尝试创建一个按钮，例如带有在单击时更改的文本的切换按钮。我尝试使用w3 schools' 方法，但没有运气。我想要实现的是this。（我指的按钮是“你怎么做”）

我们将不胜感激任何有关查找内容的帮助或指导。谢谢！

【问题讨论】：

您的具体问题是什么？您还在尝试创建按钮还是想知道如何在点击时设置文本格式？
我正在尝试创建如图所示的按钮。问题是我可以将文本放在按钮上，但我不知道如何添加第二个标签更改颜色等。

【解决方案1】：

您好，这里是您的切换按钮的解决方案

   /*Body Styling */

body {
  font-family: 'Open Sans', San-Serif;
 -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

h1 {
  margin-top:80px;
  font-weight: bold;
 }

 p {
   margin-top: 25px;
   margin-bottom: 25px;
   }

 .btn {
    margin-left: 10px;
    margin-right: 10px;
   }
 /* Boostrap Buttons Styling */

  .btn-default {
    font-family: Raleway-SemiBold;
    font-size: 13px;
    color: rgba(108, 88, 179, 0.75);
    letter-spacing: 1px;
    line-height: 15px;
    border: 2px solid rgba(108, 89, 179, 0.75);
    border-radius: 40px;
    background: transparent;
    transition: all 0.3s ease 0s;
  }

   .btn-default:hover {
         color: #FFF;
         background: rgba(108, 88, 179, 0.75);
         border: 2px solid rgba(108, 89, 179, 0.75);
       }

         .btn-primary {
             font-family: Raleway-SemiBold;
              font-size: 13px;
             color: rgba(58, 133, 191, 0.75);
             letter-spacing: 1px;
             line-height: 15px;
             border: 2px solid rgba(58, 133, 191, 0.75);
             border-radius: 40px;
             background: transparent;
         transition: all 0.3s ease 0s;
       }
          .btn-primary:hover {
            color: #FFF;
             background: rgba(58, 133, 191, 0.75);
             border: 2px solid rgba(58, 133, 191, 0.75);
            }

         .btn-success {
             font-family: Raleway-SemiBold;
             font-size: 13px;
              color: rgba(103, 192, 103, 0.75);
            letter-spacing: 1px;
            line-height: 15px;
             border: 2px solid rgba(103, 192, 103, 0.75);
             border-radius: 40px;
        background: transparent;
       transition: all 0.3s ease 0s;
     }

        .btn-success:hover {
            color: #FFF;
             background: rgb(103, 192, 103, 0.75);
             border: 2px solid rgb(103, 192, 103, 0.75);
              }


         .btn-info {
           font-family: Raleway-SemiBold;
           font-size: 13px;
             color: rgba(91, 192, 222, 0.75);
            letter-spacing: 1px;
            line-height: 15px;
            border: 2px solid rgba(91, 192, 222, 0.75);
             border-radius: 40px;
             background: transparent;
             transition: all 0.3s ease 0s;
             }

       .btn-info:hover {
          color: #FFF;
            background: rgba(91, 192, 222, 0.75);
            border: 2px solid rgba(91, 192, 222, 0.75);
             }

           .btn-warning {
            font-family: Raleway-SemiBold;
            font-size: 13px;
            color: rgba(240, 173, 78, 0.75);
            letter-spacing: 1px;
             line-height: 15px;
              border: 2px solid rgba(240, 173, 78, 0.75);
             border-radius: 40px;
             background: transparent;
             transition: all 0.3s ease 0s;
           }

          .btn-warning:hover {
                color: #FFF;
              background: rgb(240, 173, 78, 0.75);
              border: 2px solid rgba(240, 173, 78, 0.75);
            }

                .btn-danger {
                 font-family: Raleway-SemiBold;
                    font-size: 13px;
                    color: rgba(217, 83, 78, 0.75);
                    letter-spacing: 1px;
                    line-height: 15px;
                    border: 2px solid rgba(217, 83, 78, 0.75);
                    border-radius: 40px;
                    background: transparent;
                    transition: all 0.3s ease 0s;
                   }

             .btn-danger:hover {
                color: #FFF;
               background: rgba(217, 83, 78, 0.75);
                 border: 2px solid rgba(217, 83, 78, 0.75);
              }

<body>
     <div class="container text-center">
    <h1>Rounded Bootstrap Buttons</h1>
    <p>In a effort of minimizing the styling of Boostrap Default Buttons here are my results. Hope you enjoy it!</p>
    <!-- Standard button -->
    <button type="button" class="btn btn-default">Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
      <button type="button" class="btn btn-danger">Danger</button>
    </div>
    </body>

   </html>

【讨论】：