I have a button with a default green background. On hover, the background color is changed.
When the button is clicked, I want it to fall back to the green background.
How do I achieve this? I tried the following without success:
.btn {
background-color: #4dd0e1
}
.btn:hover {
background-color: #01579b
}
.btn:active {
background-color: #4dd0e1
}
.btn:visited {
background-color: #4dd0e1
}
<i class="material-icons right">arrow_forward</i>button
Thanks!
.btn{
background-color: aqua
}
.btn:visited{
background-color: yellow
}
.btn:hover {
background-color: skyblue
}
.btn:active{
background-color: pink;
}
.btn:focus{
background-color: pink;
}
<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a
You should follow this order when you write css code
a:link
a:visited
a:hover
a:active
a:focus
I don't know why, but it makes working your code.
You just change order of CSS Selectors (:visited, :hover, :active, :focus)
Use the following:
.btn:focus{
background-color: #4dd0e1
}
Use MaterializeCss colors helper clases
Materialize Colors
<a class="waves-effect waves-light btn amber darken-4">button</a>
Try this one~
<style>
.btn:hover{background-color: #b44ce1}
.btn{background-color: #b44ce1}
</style
<a class="waves-effect waves-light btn">Submit</a>
It works well for me~
Related
I have the following button:
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
I would like to style the buttons text and the fa-icon with a different color. Both should be able to change the color when i hover over the button. Im able to do either of them but cant get both working at the same time:
I can style them differently:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
This makes the text white and the icon green(Thats what i want). When i hover over the button, im now only able to change the texts color:
.btn:hover {
color: BLACK;
}
How can i change the icons color too if the button is hovered? I would like the text for example to be black and the icon to be white when the button is hovered. But im not able to achieve the latter.
You can use a rule to both the button inner text as well as the icon as following:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.btn:hover .fa,
.btn:hover{
color: red;
}
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus">+</i>
</button>
Your code means that you want to change button text on hover.
To do what you want, you should apply styles to your icon on button hover:
.btn:hover .fa.fa-plus {
color: RED;
}
So, in this case, you will apply styles to .fa.fa-plus, but on button hover.
Hope, it makes sense to you :)
Give a parent div for that button and add hover effect using that parent class
<style>
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.hover:hover .btn, .hover:hover .fa.fa-plus{
color: BLACK;
}
</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
</div>
The below is an example of how to change the child via the parent :hover attribute, implement it according to how you wish to color the plus icon.
.btn:hover .fa.fa-plus {
color: red;
}
You can use this code to access the child element of hover:
.btn:hover . {
color: BLACK;
}
use this in each element one-by-one on your main page,
For an example:
div.e:hover {
background-color:red;
}
I have 3 different links in my html and I want to change the text color of only one specific link when I hover over. The problem is that when I apply the css, it changes the color for all the links. Please help!
You should put different id to your component for example
<a id="link1"></a>
<a id="link2"></a>
Then in your css change by doing that :
#link1:hover {
color: red
}
#link2:hover {
color: green
}
<a id="link" ></a>
#link:hover {
color: #F48832;
}
Append an unique class or id to the links in the html,then apply the css
.link1:hover{
color: red;
}
.link2:hover{
color: green;
}
<a class="link1">link1</a>
<a class="link2">link2</a>
Try this....
You should add custom css class to your specific link and that css class to add below css..
.specific_link:hover{
color: blue;
}
a:hover{
color: red;
}
<a class="specific_link">link1</a>
<a>link2</a>
<a >link3</a>
If I have a button with an image inside of it how can I activate the image hover when the cursor is hovered over the button but not the image itself?
This is what I have so far:
<button type="button" class="btn btn-normal"><img src="images/contents/123.png"onmouseover="this.src='images/contents/123-hover.png'" onmouseout="this.src='images/contents/123.png'" class="image" /></div>
css:
.btn-normal {
background-color: #eee;
padding: 15px!important;
width: 250px;
margin-bottom:20px;
}
.btn-normal:hover {
background-color: #ddd;
}
.image {
background-color: #ccc;
}
.image:hover {
background-color: #009fe3;
}
Really at a loss with this - any help is appreciated!
try this
HTML file
<html>
<body>
<script type="text/javascript">
function mouseoverImage()
{
document.getElementById('img').src='images/contents/123-hover.png';
}
function mouseoutImage()
{
document.getElementById('img').src='images/contents/123.png';
}
</script>
<button class="btn btn-normal" onmouseover="mouseoverImage()" onmouseout="mouseoutImage()"><img id="img" class="image" src="images/contents/123.png"/></div>
Think I've figured it out with css... I'm thinking background-image: on the button should work. Hopefully!...
As suggested by #Henrik in the comments above, .btn:hover .image selector should work for you. I have created a simple fiddle with your code. I have added a border style to the image element on hover of btn. And it works.
.btn:hover .image{border:1px solid red;}
I am using BigCommerce, and have this for my code:
.icon-cart {
color: #4ca3c0 !important;
}
.icon-cart a{
color: #4ca3c0 !important;
}
and it won't change the color of the icon. Any help?
http://glymed-plus.mybigcommerce.com/
The fontAwesome installation is messed up.
The reason color CSS attribute won't change the color of the shopping cart is because the shopping cart is being rendered by a sprite:
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
}
(the background is loading an image, instead of the icon).
See http://fortawesome.github.io/Font-Awesome/get-started/
You might not have copied the other folders in the installation.
If you remove the background, install the other dirs, and keep your HTML, it should work.
EDIT: You were right, fontAwesome is correctly installed.
Now change the <i> element:
<i class="fa fa-shopping-cart" title="View Cart"> </i>
You can set the size and position to better the display, but the fa and fa-shopping-cart classes must be set for showing the shopping cart icon.
Your icon is not css made, it is a png image that is loaded as the icon's background.
you cannot just 'change' its color, you need to adjust it using CSS Filters
in your case, you can apply invert on the <i> element:
-webkit-filter: invert(100%);
to change it from gray to white.
body {
background: black;
}
.icon {
display: inline-block;
width: 16px;
height: 14px;
background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
-webkit-filter: invert(100%);
}
.icon:hover {
-webkit-filter: invert(0%);
}
<i class="icon icon-cart" title="View Cart" style="
color: red;
"> </i>
First Remove !important
.icon-cart {
color: #4ca3c0;
}
.icon-cart a{
color: #4ca3c0;
}
now here is how you markup looks like
<a href="" title="View Cart">
<i class="icon icon-cart" title="View Cart"> </i>
<span></span>
</a>
.icon-cart is i and has no child.
So this is not valid:
.icon-cart a{
color: #4ca3c0;
}
I want a button composed of some text and an icon next to it. I can specify that each has a :hover state in CSS to change its appearance, but how can I arrange my CSS/HTML such that rolling over the text appears to also change the image hover state, and vise versa?
Preferably avoiding JS.
Update: The current state of my fiddling around...
<a class="close"><div class="closebutt"></div></a>
a.close {
float:right;
font-size:12px;
color: #a7dbe6;
text-decoration:underline;
}
a.close:hover {
color: #fff;
}
a.vs_rewardClose:before {
content:"Close "
}
.closebutt {
background: url(images/close.gif) no-repeat;
display:inline-block;
width:14px;
height:14px;
}
.closebutt:hover {
background-position: 0px -14px;
}
With your HTML, changing the background-position of the div is just a matter of:
.close:hover > .closebutt {
background-position: 0px -14px;
}
In this way, the background-position changes only when its parent gets hovered.
This is the original answer I posted before you updated your question:
I usually organize my HTML in this way
<a href="#" class="button">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
EDIT: as #Paul D. Waite notes in the comments, this HTML structure is invalid in HTML4 because an a can contain only inline elements. So, to fix this we can change the structure in this way, having spans as children of the a. The CSS remains the same, eventually adding display: block if needed.
<a href="#" class="button">
<span class="glyph"></span>
<span class="text">Button text</span>
</a>
and your CSS in this way:
.button {
/* .. general style */
}
.button > .glyph {
/* .. general style for the glyph, like size or display: block */
background-image: url('..');
background-repeat: no-repeat;
background-position: left top;
}
.button > .text {
/* .. general style for the text, like font-size or display: block */
text-decoration: none;
}
.button:hover > .glyph {
/* .. change the glyph style when the button is hovered */
background-position: left bottom;
}
.button:hover > .text {
/* .. change the text style when the button is hovered */
text-decoration: underline;
}
In this way you can also change the style adding a new class to the button, in this way:
<a href="#" class="button red">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
<a href="#" class="button gray">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
And the CSS
.button.red {
background-color: red;
}
.button.red > .text {
color: black;
}
.button.gray {
background-color: darkgray;
}
.button.gray > .text {
color: white;
}
Enclose both in one element and add :hover to this element:
.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}