我正在尝试创建一个按钮,如带有文本的按钮,该按钮在单击时会发生变化。 我尝试使用w3 schools'方法,但是没有运气。 我正在尝试实现的是this。 (我指的是“您的操作方法”)
任何寻求帮助的帮助或指导将不胜感激。 谢谢!
答案 0 :(得分: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>