Hi I want to make a menu button that should look like this when it is hovered:
But I made some thing that looks like this
You may notice the black border is not square as first image.
Here is my code (CSS):
#menu a:hover{
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
color: #FFF;
}
try this, this will work.
#menu a:hover{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
#menu a{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
It might look a bit goofy without any padding.. so this is what I'd recommend. Stack overflow's pound symbol got cut out from the CSS signature
#menu a {
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<====================== added this*/
color: #FFF;
}
#menu a:hover {
border-top: 5px solid #333333;
border-left: 0px solid #666666; /*<========== changed this for hover effect*/
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<========================== added this*/
color: #FFF;
}
Tested in FF5 and IE8. Looks ok. The buttons are hyperlinks in white space.
But changes style on hover as you want.
#menu a:hover{
border-top: 5px solid #333;
background-color: #666;
padding: 0 5px 5px 5px;
color: #FFF;
}
Related
I need to move the text inside a button horizontally on click to make a win95-ish click effect.
I've tried doing it with translate, but that moves the whole button, not just its contents. How do i move the text? I'd like to avoid creating elements inside buttons or messing with the padding.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
<button type="button">Click me!</button>
https://jsfiddle.net/qz0gt378/
You can use a text-shadow if you don't want to use other elements.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
text-shadow: 2px 2px 0px black;
color: transparent;
}
<button type="button">Click me!</button>
You can change the padding of your button.
body {
background-color: #008080;
}
button {
outline: none;
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
padding: 6px 11px 4px 13px;
}
<button type="button">Click me!</button>
This question already has answers here:
how to make a background-color on a div tag
(2 answers)
background color inside my <div> element using CSS
(4 answers)
Closed 2 years ago.
I found a button code so I used it. After that I saw that the button was completely transparent I learned how to colorize its text but not the background.
Can you assist?
The Code is:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>
Use background property background-color to change the background color.
Example:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: red;
}
<div class="my_content_container">
Go to my link location
</div>
Add background-color property in your css rule:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: #fbca8e; /* <- Here */
}
How do I colorize my button in JavaScript?
Use style.backgroundColor property.
document.querySelector(".my_content_container > a").style.backgroundColor = "red";
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>
Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:
Broken in Safari
... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.
HTML:
<div class="input-with-icon">
<div class="icon">X</div>
<div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>
CSS:
.input-with-icon .icon {
float: left;
background-color: #fff;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
padding: 13px 0 14px 10px;
color: grey;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
.input-with-icon .input {
overflow: hidden;
}
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
}
Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.
https://jsfiddle.net/r08gxre3/1/
Any help would be much appreciated, thanks guys! :)
Just add margin: 0px; to your input element. It should be that!
Like:
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
margin: 0px;
/* or just margin-top: 0px; */
}
Fiddle: https://jsfiddle.net/bbdkzuyn/
I have this design of a table with a menu next to it: fiddle, The problem is that the corners of the #settingNev ul li a is shown on the border-right so there are little white dots and the border the is connected to the menue and the table(you can se the in the fiddle easly).
How can i do hat they wont be? i want that the ul's li background-color will stay white and will not transparent(transparent solves it)?
Also i dont want to set the left,top and bottom borders as 0px becaus ethen when its hover one li the other move
similar to musefans answer but with a fix^^
#settingNev ul li a {
display: block;
border-radius: 6px 0px 0px 6px;
color: #666;
//padding: 5px 3px;
padding: 6px 3px 6px 4px;
border: none;
border-right: 1px solid black;
//margin: 1px 0 1px 1px;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
#settingNev .active a {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
here is a fiddle(updated)
also you have some duplicated css in you fidle
UPDATE: use padding instead of margin this works now you can see it in my updated fiddle
When hovering on a nav list item (arranged horizontally) that gets larger and gets a margin to create a gap between it and the other list items adjacent to it how do you make it that the hovered item stays centered to its pre-hover location while the adjacent items spread away, to the left and right? Below is the code I have so far (you can also check it out on CodePen).
Thanks,
TJ
#nav {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 15px;
right: 15%;
font-weight: bold;
}
#nav:hover {
}
#nav li {
float: left;
padding: 5px 10px;
text-align: center;
}
li:first-child {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 4px solid white;
}
li:nth-child(2) {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
li:nth-child(3) {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
li:nth-child(4) {
border-top: 4px solid white;
border-right: 4px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
#nav li:hover {
box-shadow:
2px 2px 6px rgba(0, 0, 0, 0.2),
-2px -2px 6px rgba(0, 0, 0, 0.2),
-2px 2px 6px rgba(0, 0, 0, 0.2),
2px -2px 6px rgba(0, 0, 0, 0.2);
z-index: 5;
text-align: center;
background-color: white;
color: black;
border: 4px solid rgba(0, 0, 0, 0.2);
font-size: 1.2em;
margin: 0 10px;
}
I have done it using only CSS. So the key is to use:
display: inline;
on the li, and to wrap the ul in a div that will allow you to:
text-align: center;
Now that it is centered it will grow from the center. I made the changes here - http://codepen.io/anon/pen/uIdsr
Took a bit of manipulating, but here's the code that will do this for you: http://codepen.io/anon/pen/cIEno. Please note, this requires jQuery, as you need to move the other elements to keep the hovered one centered.