css 带有文本的切换式按钮

r3i60tvu 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(468)

我试图创建一个按钮，就像一个切换与文本的变化，点击。我试着用w3 schools'方法玩了一下，但没有运气。我想做的是this。（我所指的按钮是“你怎么做”）
任何帮助或方向，以寻找什么将不胜感激。谢谢！

css

来源：https://stackoverflow.com/questions/53223804/toggle-like-button-with-text

1条答案

按热度按时间

k4emjkb11#

嗨这里的解决方案为您的切换一样的按钮

/*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>

赞(0）回复(0）举报 2023-06-07

我来回答

css 带有文本的切换式按钮

1条答案

相关问题

热门标签

最新问答