This question already has answers here:
Simple CSS button with a rectangle beneath
(4 answers)
Closed 9 years ago.
I'm trying to create a CSS based 'button' like this:
The blue is just a background, so it's only about the text "Welkom" and the rectangle displayed below.
Whenever it's active or hovered over it should display a rectangle BELOW the button.
HTML: (This is the button)
<li>Welkom</li>
If the below is your HTML:
<li>Welkom</li>
Then you can do this:
li:hover,li:active{
border-bottom:3px solid blue; /*change blue to the color you want*/
}
See this demo
Fiddle in response to comment: Fiddle 2
The above uses box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border(without requiring adjustment) but it will not work in IE9 and below
Fiddle 3 : Will work in all browsers but you will have to adjust the bottom at the center using relative positioning for both li and a tag within it.
you can do that on :hover with a border-bottom:
But you may and a border already without the hover so avoid jumping.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
The code above is not all you may need.
-Sven
EDIT: as you see the other answer, U ay do that on the list element directly.
simple just follow below code:
HTML:
<div class="link">Welkom</div>
CSS:
.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.link a{ font-family:arial; text-decoration:none; color:#fff;
}
.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
Related
This question already has answers here:
Remove border from buttons
(13 answers)
Closed 1 year ago.
As you can see in the image, when I click the search button on the right there is an orange border, and I would like to remove it. I have tried the following, but it did not work:
.btn-serch:active{
background-color: #92949C;
border:0px solid white;
}
I also tried:
.btn-serch:active{
background-color: #92949C;
border:none;
}
Try this
.btn-serch:active{
background-color: #92949C;
border:none;
outline:none;
}
OR
button:focus {
border: none;
outline: none;
}
You'll want to override the outline property
When hovering cursor over the link, it's like it jumps down or adds extra pixel on the bottom. Looks like a common problem. I've tried solutions I found on this site, but none seem to work.
This is js fiddle
https://jsfiddle.net/srhjv284/
This is html
<div class="wrap">
Item 1 text
Some Other Text
Last Item
</div>
And this is css
.wrap {width:200px;}
.item {
display:block;
margin:2px 0;
padding:4px 8px;
background-color:#fff;
font-family:arial;
font-size:15px;
color:#ba050a;
border:1px solid #ba050a;
text-decoration:none;
transition:0.4s;
}
.item:hover {
color:#fff;
background-color:#ba050a;
}
This is just happening because you have the same border colour and the background colour on hover.
So when you hover, 1px border merge with background and it feels like that space increased.
Please change the border colour or background colour on hover and you will see the difference.
On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
I want to create a bounding box around the div with a grey border how do i do that Please help.
Please find below my code:
http://codepen.io/anon/pen/gyxpE
CSS:
.box {
border:2px solid #ECF0F1;
}
I want to surround the row with a white border and so on and so forth
Please find my code here : http://codepen.io/anon/pen/gyxpE
I solved my issue:
Used the following CSS:
.box {
width:100%;
display:inline-block;
border:2px solid #ECF0F1;
margin:0;
}
Also removed all the margins from my CSS
I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!