In my HTML I have the following:
Knowledge Base
<br />
In my CSS I have the following classes:
.button1 {
display: block;
height: 25px;
width: 130px;
background: #ffffff;
border: 2px solid #000000;
Color: #000000;
text-align: center;
margin-left: auto;
margin-right:auto;
padding-top:10px;
font-weight: 700;
}
The link color is blue, I want to make the link black with white background. I want to change this on hover by making the background black and the link color white.
I can't make it by using the following CSS class:
.button1 a:hover {
background: #393939;
Color: #ffffff;
}
Do I have to change my HTML to be:
<button class="button1" id="save">Sample button</button>
Please advice. I appreciate your support
Is that something like that http://codepen.io/anon/pen/vNMLar ?
a.button1:hover {
background: #000;
Color: #fff;
transition: all 0.2s ease-in-out;
}
it should be
a.button1:hover {
background: #393939;
color: #ffffff;
}
.button1 is already your link. What you did is tell to look for a link inside .button1
EDIT: also the name for the attributes is lower case
Related
I am currently working on making a website for my startup Virtual Business, and I am trying to make the <input> tag let me download a file.
Current Code, which I have used from other Stack Overflow Posts
<input type="button" value="Download" classs="buyButton"onclick="href='google.com'">
I have all of the CSS laid out, and the button is functional, but just needs to look like the button on the far right Image at this link
Add CSS like this:
.buyButton {
background-color: #C0C0C0;
border: none;
color: white;
padding: 10px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.buyButton:hover {
background-color: black;
color: white;
}
<input type="button" value="Download" class="buyButton" onclick="location.href='google.com'">
Bootstrap has a variety of different buttons to choose from.
For your button to appear on the far right, use css styling float:right;
https://getbootstrap.com/docs/4.0/components/buttons/
<button type="button" class="btn--download" onclick="location.href='stackoverflow.com'">Download</button
.btn--download {
border-radius: 7px;
box-shadow: none;
color: black;
cursor: pointer;
padding: 10px 15px;
transition: ease .4s background-color, ease .4s color .4s
}
.btn--download:hover {
background-color: black;
color: white;
}
I have created social icons using w3schools and when pasting the code into my sidebar widget the text within the icons shows black instead of white.
This is my code:
.fa {
padding: 15px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 3px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-instagram {
background: #E1306C;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
Thanks for your help!
You've used hover. Remove this to get same color which you've given in CSS.
.fa:hover {
opacity: 0.7;
}
I've tested your code and it seems to work correctly outside the side-bar.
So the problem might be the side-bar-widget. Do you wrote the widget yourself?
If not, maybe there is a default-style for a-tags in your sidebar that over-writes your color. You could change that, if possible.
Another way would be to increase the specificity of your css, for example by using:
a.fa-facebook {
background: #3B5998;
color: white;
}
If nothing helps, you could try adding an important-statement to your color:
.fa-facebook {
background: #3B5998;
color: white !important;
}
But use !important with care, it is not considered best-pracitce.
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Quick CSS/HTML issue here, please excuse my lack of experience in the field.
I have a download button that I would like to change from having white text to having grey text on hover. Currently the text is white, however despite my defining of a :hover attribute to change the color, it remains white. Here's my code:
HTML:
<a id="postLink" class="button2" href="#">Post</a>
CSS:
.button2 {
display: inline-block;
width:163px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #EFEFEF;
border-radius: 8px;
background: #589edb;
font: normal normal normal 20px raleway;
text-decoration: none;
z-index:150;
}
.button2 :hover{
color:#555555;
}
.button2:focus {
border: 1px solid #EFEFEF;
background: #589edb;
background: -webkit-gradient(linear, left top, left bottom, from(#6abeff), to(#6abeff));
background: -moz-linear-gradient(top, #589edb, #589edb);
background: linear-gradient(to bottom, #589edb, #589edb);
text-decoration: none;
}
.button2:active {
background: #589edb;
color:#FFFFFF;
}
#postLink{
color:#FFFFFF;
&:hover{
color:#55555;
}
}
Thanks!
Your .button2 :hover should be .button2:hover the whitespace screws it up ;)
I would remove the
#postLink{
color:#FFFFFF;
&:hover{
color:#55555;
}
}
as it adds nothing and might screw up your code. Are you using LessCSS or SASS? Otherwise, &:hover will not work. Then the #postLink will prioritise over the class and will keep it white.