Currently i'm running into a problem while i'm trying to get a link button styled.
I currently have the code for unclicked button:
a.linktest:link{
color:#00F;
border: solid 0.125em #5f9eA0;
border-radius:0.3125em;
text-decoration: none;
background-color:#FFFF33;
}
and
a.linktest:hover{
color: #FF0000;
border-radius:0.3125em;
border: solid #FFFF33 0.125em;
text-decoration: none;
background-color: white;
}
where it references class "linktest". The problem I run into is while I hover over the button it changes the color of the text,border, and background; the color of an unclicked button for text and border is not chaning into what i'm specifying.
Did I do anything wrong here?
edit: here's the relevant link i'm testing. http://jsfiddle.net/1zrq381o/2/
Just remove :link
a.linktest{ /* Remove :link*/
color:#00F;
border: solid 0.125em #5f9eA0;
border-radius:0.3125em;
text-decoration: none;
background-color:#FFFF33;
}
a.linktest:hover{
color: #FF0000;
border-radius:0.3125em;
border: solid #FFFF33 0.125em;
text-decoration: none;
background-color: white;
}
Check it working: Jsfiddle
Related
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/
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
I'm creating a buttoned-link. The concept is that the link shall have a border. The border-style will be outset. And the a:active will be border-style: inset.
When I add the following code, it shows like the image I've provided. Why isn't the border working?
<style>
a {
border-style: outset; text-decoration: none; color: #000;}
a:active {
border-style: inset; text-decoration: none; color: #000;}
</style>
</head>
<body>
<a href="#divlast">
<p>Some random text here to check the border's working.</p></a>
<div class="divlast">
<p>The Last Division</p>
</div>
You can remove p tags from link.
<a href="#divlast">
Some random text here to check the border's working.
</a>
A element is inline element by default, but you may want to render it as a block element.
a {
display: block; border-style: outset; text-decoration: none; color: #000;}
a:active {
border-style: inset; text-decoration: none; color: #000;}
You shouldn't add block elements into inline elements.
I think you have two issues.
The first is that you're putting a p tag inside your anchor, which is messing up the formatting, I'm not seeing a need for that.
The second is that you're not specifying a full style for your border, which would help.
I think this is your desired result, yes?
Example Here
HTML
<a href="#divlast">
Some random text here to check the border's working.
</a>
<div class="divlast">
<p>The Last Division</p>
</div>
CSS
a {
border:3px solid pink;
border-style: outset; text-decoration: none; color: #000;
}
a:active {
border-style: inset; text-decoration: none; color: #000;
}
Borders apply to 'block' type elements so you would have to apply some form of block formatting to the a tag
For instance:
CSS
a {
border-style: outset;
text-decoration: none;
color: #000;
display: inline-block;
}
a:hover {
border-style: inset;
text-decoration: none;
color: #000;
}
JSfiddle Demo
You can simply do it like that:
JSFiddle http://jsfiddle.net/WK3XJ/1/
HTML
<a href="#divlast">
Some random text here to check the border's working.</a>
<div class="divlast">
<p>The Last Division</p>
</div>
CSS
a {
border: solid 3px green;
border-style: outset;
text-decoration: none;
color: #000;
}
a:active {
border: solid 3px green;
border-style: inset;
text-decoration: none;
color: #000;
}
On IE11 the focus rectangle is very noticable..
I reviewed my css file and couldn't find any related style...
Does anyone encounter this? How can I solve it?
This focus rectangle is not present on earlier IE versions....
UPDATE:
Thanks to #Tim B James I have modified the css:
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
outline: 0;
}
input:focus, textarea:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
button :focus {
border: 1px solid #7ac0da;
outline-style: dotted;
outline-width: thin;
}
Thank you very much.
Use outline: none in your CSS rules for those buttons (or specify a different, less noticeable, outline). See https://developer.mozilla.org/en-US/docs/Web/CSS/outline
My uploaded css is using border: thin dashed but Firebug is show the style as border: thin solid.
This is uploaded style
#menu a{
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #FFF;
text-decoration: none;
border: thin dashed #FFF;
border-radius: 3px;
outline: none;
}
This is CSS I see in Firebug
#menu a {
border: thin solid #FFFFFF;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
outline: none;
padding: 3px 5px;
text-decoration: none;
}
On local preview (F12-Firefox 16) #menu a border is dashed, but loaded from server, #menu a border is solid!
Sounds like some caching is in play. Try clearing your browser's cache. If that doesn't work, add ?v1 to the end of the URL you use to call the CSS file. This will work as a cache buster. Ex: /assets/CSS/styles.css?v1
If neither work, I'd say you aren't uploading your CSS to the correct location.
Firebug consolidates your CSS as much as possible. So if you have:
padding-left:1px;
padding-right:1px;
padding-top:1px;
padding-bottom:1px;
it will then show it as
padding: 1px;