I'm trying to stop bootstrap 3 default button to be underline when mouseover, but no success at all. Here is my CSS and HTML code:
.btn-default:hover {
font-style: normal;
background-color: white;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>
Notice that I could change the :hover background-color, but looks like the propertie font-style is not referred to what I'm trying to change.
Here is how the button looks like:
Button Sample
Underlines are controlled by the text-decoration CSS attribute, not the font-style attribute. Also, the underline is not being applied to the button tag itself, but the anchor tag within the button.
See this demo:
a {
text-decoration: none;
}
<button type="button" class="btn btn-default btn-lg">Tech Skills
</button>
Related
I'm having problems in order to change the colour of this button. This is the code:
<div class = "Petrol">
<a href="PayMethod.php"><button class="btn btn-default btn-lg" type="button"><span class="Text">Petrol<br><small>(Hi-Grade)</small></span></button>
</a>
</div>
Can you please help me?
if you need to change the color of the button do this:
.btn {
background-color:blue;
}
if you need to change the text inside the color of the button
.btn {
color:red;
}
Assuming by the classes you used, I think you are using Bootstrap. Bootstrap provide pre-defined classes to change bg color of buttons. Replace btn-default by any of the following to get a different color. btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link.
Take a look at the docs.
You could also apply a custom class btn-custom and style it.
.btn-custom {
background: #ff0; /* use your color here */
}
Straightfoward way works fine
.btn {
color:blue;
}
Example
I'd like to display the text in parenthesis smaller than the rest of the button text.
<input type="button" value="Bigger Text (Smaller Text)"/>
Thanks for your support.
Try using button type="button" instead of input type="button". So inside you can define a different style for smaller text.
.btn {
font-size: 15px;
}
.btn .small {
font-size: 12px;
}
<button type="button" class="btn">
Bigger Text (<span class="small">Smaller Text</span>)
</button>
I am not able to use <ul> <li> hover and click..
Inside <li> tag I have <button> tag not <a> tag.
I want same hover and click functionality in button tag as anchor only.
My Css :
.custom-anchor:hover {
color: #ffffff;
background-color: #3276b1;
text-decoration: none;
}
My HTML :
<div class="btn-group">
<button id="csr_duration_btn"
class="btn dropdown-toggle btn-xs btn-success"
data-toggle="dropdown">{{csrServiceModel.selectedDuration.name}}<i class="fa fa-caret-down"></i>
</button>
<ul id="comparision-chart-interval" class="dropdown-menu pull-right">
<li data-ng-repeat="duration in csrServiceModel.durations">
<button class="btn btn-link custom-anchor" data-ng-click="csrServiceModel.durationSelect(duration)" ng-disabled="duration.enabled">{{ duration.name }}</button>
</li>
</ul>
</div>
I tried to add same custom class for <li> tag also but it is not working.
It should work like below image :
Edited :
You can see ..... Some options are disabled in the lists.. Is there any way on click of disabled option list it should not do anything..
I want to prevent the event if disabled list option is clicked..
Please help...
It looks like formatting is done using bootstrap. Add following css rule:
#comparision-chart-interval li button {
width:100%;
}
First post here. I'm trying to override the link colors for Bootstrap buttons, but I can't get it to work. I actually got the background color to change, but I can't get the link colors to change. I also can't figure out how to space the buttons out more.
<span>
<button type="button" class="btn btn-default btn-lg">Resume</button>
<button type="button" class="btn btn-default btn-lg"> Twitter</button>
<button type="button" class="btn btn-default btn-lg">LinkedIn</button>
</span>
My css currently looks like:
.btn{
background-color:#d0d0d0;
text-align:center;
display:block;
}
To change the text colour of the BootStrap buttons, you'll actually have to target the <a> element inside of the .btn. For example:
.btn a{
color:#000;
}
This would change button link text to black. Hope this helped, let me know if you have any questions!
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>