I'm pulling my hair out to try and find out why my hover background-color isn't working for my custom buttons. I'm using twitter Bootstrap v3.
Here is the css code:
.btn-slide1 {
padding: 20px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;
background-color:#5cb85c;
border-color:#4cae4c;
}
.btn-slide1:hover,.btn-slide1:focus,.btn-slide1:active {background-color: #9966cc !important;}
Here is the html:
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/slide1.jpg');"></div>
<div class="carousel-caption">
<h2>Turn your art into a masterpiece</h2><br>
<a class="btn btn-slide1" href="#">Learn More</a>
</div>
</div>
I've tried adding '.btn' to the css code, and that hasn't worked.
It's part of a carousel slider. Could this be the reason?
This is the page in question: index_test.html
What am I missing?
Thank you!
Your problem is here. There is a negative z-index property on the carousel items. In full-slider.css line 124.
.carousel, .item, .active {
height: 100%;
z-index: -10 !important;
}
Changing it to 0 or more will fix. What's happening is it's behind the element that you're actually hovering.. You can check out this link for more on z-index and different behaviours. https://stackoverflow.com/a/35330122/2971290
Remove the z-index in /css/full-slider.css line 124.
It will be fine then.
I had the same problem that my btn:hover didn't work.
I changed Bootstrap link (after that worked)
Related
It's mostly in the title. I am displaying products in divs on my website. On hover, I make them increase in size by applying a margin of -15px to give them a nice hover effect. When I hover over any of them, it is fine except for the right-most ones, as it pushes the products below it away into the Bootstrap row below. Here are images:
Good (hover over a middle one):
Bad (hover over the right-most one):
Here is the code:
Search results page:
<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>
Product template:
<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>
CSS:
div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}
How do I stop the Bootstrap grid system from pushing the bottom row into the row lower?
on hover, I make them increase in size by applying a margin of -15px
Use transform: scale(x); instead of margin: -15px; as transforms do not affect the box-model of the element.
CSS Transforms Module Level 1:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
If you want to move it up by a certain amount, use transform: translateY(-15px) instead of changing the margin on the div.product-item:hover class. To move it in a context that does not interrupt the rest of the document. Or you can use transform: scale(1.2) to make things bigger.
The problem is that it's actually changing the dimentions of the div when you change the margin which in turn affects others. Check out this link . It gives an example on how to give such zoom effect.
Creating a Zoom Effect on an image on hover using CSS?
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
For example, I can use this
-webkit-border-radius: 30px
To give the HTML5 element, such as a button, a round corner instead of a normal angular corner
Can I do the same for navbar?
The below is awesome but I am just curious if I can give the round corners to a navbar. If not then it is ok it is not overwhelmingly important
<div data-role="navbar">
<ul>
<li> <a href="#" class="ui-btn-active" id=viewtherecent> Recent </a> </li>
<li> <a href="#" id=viewthefrequency> Frequent </a> </li>
</ul>
</div> <!-- /navbar -->
Im not sure if you mean the buttons in the navbar or the Navbar itself so i provided 2 demos.
Demo rounded buttons
http://jsfiddle.net/r10tjkuz/
CSS
.nav-border {
border-radius: 30px;
}
Demo rounded Navbar
http://jsfiddle.net/6y1294rv/
CSS
.nav-bordera {
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
.nav-borderb {
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
Yes you can. Add a CSS class to your navbar and set border radius:
<div class="navbar" data-role="navbar"></div>
.navbar {
border-radius: 30px;
}
If you don't want to add a class you can use CSS attribute selectors (but I don't usually style things like this).
[data-role=navbar] {
border-radius: 30px;
}
Yeap or if vendor prefixes are THAT important to you -- as they appear to be:
[data-role=navbar] {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
if you're using bootstrap 4 then you can do it by adding this to your css :
.header-dark .navbar {
border-radius:25px;
}
I am learning html, css and twitter bootstrap as I go along.
<div id="button" style=" position:absolute;top:450px; left:350px;">
<p>
<a href="https://docs.google.com/forms/d/1Exo4u2iRpChj-
Wg9K5HxteMeoVE1uee0fQKBWiuYYiw/viewform?pli=1" class="btn btn-primary btn-
large">Search
</a>
</p>
</div>
I want to increase the size of the font of this button and hence make it bigger. Could someone help me with this please?
Thanks!
This has changed in Bootstrap 3.
Now it is .btn-lg, .btn-sm, or .btn-xs
https://getbootstrap.com/docs/3.4/css/
here are the sizes bootstrap offers right out of the box.
.btn-large
.btn-small
.btn-mini
read more about it here
it's under Button sizes
Edit:
or you could make your own:
.btn-xlarge {
padding: 18px 28px;
font-size: 22px; //change this to your desired size
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Source located here
This has changed again in Bootstrap 4.
Now there is only .btn-lg and .btn-sm
https://getbootstrap.com/docs/4.0/components/buttons/#sizes
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.