Changing the colour of a button - html

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

Related

Change Bootstrap icon color

I print this icon into a table using php code like this:
echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons"></i></a></button>';
And I'd ike to change the icon's color. I tried to add the color to the button style; however it does not seem to work.
You should add style to i tag
<i style = "color:blue;" class="material-icons"></i>
also, you can create a css class
.blue {
color:blue
}
and then just add that class to a tag
<i class="material-icons blue"></i>
You have to add the styling to the icon itself if you are using inline styling.
<i style="color: #ff0000" class="material-icons"></i>
Better yet you can use some some css to make this cleaner and more manageable and do something in css like this
.material-icons {
color: #ff0000;
}
Checkout the css w3 schools code examples https://www.w3schools.com/css/

Is it possible to style a CSS class relative to another CSS class (not outer class)?

So, here's a snippet of my HTML:
<div class="stepwizard__step">
<a class="btn btn-primary stepwizard__btn">1</a>
<p class="stepwizard__step-text">Payment</p>
</div>
Basically, what I want to do is, every time there's a Bootstrap primary button (.btn-primary), I want to change the color of the .stepwizard__step-text (in this case, "Payment") to red.
Is this possible?
My first instinct was to try something like this:
.btn-primary > .stepwizard__step-text {
color: red;
}
but then I realized that won't work because the stepwizard__step-text class isn't inside the btn-primary class.
I realize this is a bit of stretch, but is there a way in CSS to check if the btn-primary class exists inside of stepwizard__step and if it does, to change the color of stepwizard__step-text to red? If not, can anyone think of another way to do this?
The element>element selector is used to select elements with a specific parent.
Note: Elements that are not directly a child of the specified parent, are not selected.
So, you must use + Selector :
The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
Read More :
https://www.w3schools.com/cssref/sel_element_gt.asp
In your Case Change Code Like:
.btn-primary + p.stepwizard__step-text {
color: red;
}
<div class="stepwizard__step">
<a class="btn btn-primary stepwizard_btn">1</a>
<p class="stepwizard__step-text">Payment</p>
</div>
Is there a way in CSS to check if the btn-primary class exists inside of stepwizard__step and if it does, to change the color of stepwizard__step-text to red?
Yes, but only if stepwizard__step-text comes after the btn-primary. This is because rules only go down the DOM tree, never to parent elements or predecessors.
The rules can be built as follows:
Select a .btn-primary inside .stepwizard__step...
.stepwizard__step .btn-primary
...and target a .stepwizard__step-text coming right after it.
.stepwizard__step .btn-primary + .stepwizard__step-text
If there can be elements between the .btn-primary and .stepwizard__step-text, use a ~ instead of a + in the last selector. This is the general sibling selector.
Your example would then become something like the following.
.stepwizard__step .btn-primary ~ .stepwizard__step-text {
color: red;
}
<div class="stepwizard__step">
<a class="btn btn-primary stepwizard_btn">1</a>
<p class="stepwizard__step-text">Payment</p>
</div>
You can do this:
.btn-primary+p.stepwizard__step-text {
color: red;
}
<div class="stepwizard__step">
<a class="btn btn-primary stepwizard_btn">1</a>
<p class="stepwizard__step-text">Payment</p>
</div>
Hope it works for your use!
Here is solution:
.stepwizard__step > a + p{color:red;}
or
.stepwizard__step a + p{color:red;}
or
.stepwizard__step .btn-primary + p{color:red;}
or
.stepwizard__step .btn-primary + .stepwizard__step-text{color:red;}
Let me know if there is any other confusion?

Stop Bootstrap3 button text to turn underline on mouseover

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>

how to add hover effect to button using css

i'm trying to add hover effect to my menu.This is my html
<div class="nav-top-menu nav-top">
<span class="menu-icons">
<button class="menu-button hoverEfect">
<i class="fa fa-cog fa-2x"></i>
<span class="menu-icons-text" id="userName">Enhanzer(pvt)ltd</span>
</button>
</span>
</div>
i just want to change color when mouse over.This is css that i tried
.nav-top-menu .hoverEfect button:hover
{
color: #65b4d7;
}
can anyone help me to do this. i don't want to use javascript or jquery
Change this:
.nav-top-menu .hoverEfect button:hover
To this:
.nav-top-menu .hoverEfect:hover
As .hoverEffect is itself a button
You may also use:
.nav-top-menu button.hoverEfect:hover
{
color: #65b4d7;
}
spaces in css chain to children. as such you will need to adjust your css to the following:
.nav-top-menu button.hoverEfect:hover
{
color: #65b4d7;
}
.nav-top-menu .hoverEfect button:hover
{
background-color: #65b4d7;
}
you need to change back ground color for the effect or change the font color etc.

Multiple CSS styles on a html button

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>