I have following code to display the image in button using CSS, but I am unable to get it working. The image is in the same directory where the CSS file is.
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background:url(submit-button.gif) no-repeat 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
#submit-go:hover {
background-position:0 -26px;
}
<div align="center"><button type="submit" id="submit-go" >Submit</button></div>
It may be because background is still overriding background-position. Try changing background to this:
#submit-go {
margin-top:1em;
width:69px;
height:26px;
text-indent:-9999px;
overflow:hidden;
border:0;
background-image:url(submit-button.gif);
background-repeat: no-repeat;
background-position: 0 0;
display:block;
cursor:pointer !important; cursor:hand;
}
I created this fiddle with your code http://jsfiddle.net/rDvTe/1/ and think it works properly tested in Chrome).
I replaced the image link with a URL so it would work, and also added
#submit-go {border: 1px solid red;}
to better see the button.
Am I right if I suppose you wanted the background-image to show up on hover? Else just switch the background-position in normal and hover state.
Hope this is what you were looking for.
Related
I would like an easier / efficient way to edit the CSS of the <img class "search-button> when hovering over <button class="search-button"> instead of changing the search-button itself like I have done below.
The fact that the img is changing height and the button isn't is also bizarre to me. I would think changing the height attribute would change the height of the button and not the height of the img
Is it possible to do without using Javascipt and a pure CSS method? An explanation would be appreciated as I am self-studying and more information is far valuable than just a solution.
After fix and edit - My Question : Could it be simplier?
HTML
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
CSS
search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
height:80%;
}
.search-button:hover .search-button-img { /*Fixed hover space */
margin-top:-1px;
margin-left:-1px;
height:100%;
}
Original : http://jsfiddle.net/x8xwxg3z/
Updated (Working Well) : http://jsfiddle.net/x8xwxg3z/5/
*random magnifier image for example
Use Tramsform scale
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button-img:hover {
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button"><img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt=""></button>
Or apply the :hover on the parent
.search-button {
padding:0px;
margin:0px;
width:145px;
height:145px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
}
.search-button-img {
width: 80%;
transition: transform .3s ease
}
.search-button:hover .search-button-img{
transform: scale(1.2,1.2)
}
<button type="submit" class="search-button">
<img class="search-button-img" src="http://teacherweb.co.za/wp-content/uploads/2014/10/search.png" alt="">
</button>
your problem is from the space between :hover and your class so remove the space
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
So if I understood you right, you want only the image to become bigger, but not the button?
You could try the following:
.search-button:hover .search-button-img {
height: 90%;
}
instead of:
.search-button :hover {
margin-top:-1px;
margin-left:-1px;
height:100%;
}
This won't work, because you're using a space between the class/selector and the pseudo class. In CSS you write selector:pseudoclass as soon as you use a space, CSS interprets that as a child. So .foo .bar would adress the div with the class bar in <div class="foo"><div class="bar">Baz</div></div>. CSS Selectors can be ID's, Classes or simply selectors. Classes are adressed by a . in front and IDs by a #. I hope this helps.
With CSS you are able to adress a child element like the image. And it's Javascript, what you meant not Java ;)
try this : http://jsfiddle.net/x8xwxg3z/3/
and css code is here:
.search-button {
padding:0px;
margin:0px;
width:105px;
height:105px;
border-radius: 5px;
background-color:transparent;
overflow:hidden;
position:relative; transition:all 0.5s ease-in 0s;
}
.search-button-img {
height:50px;
position:absolute; top:10px; left:20px
}
.search-button:hover {
margin-top:-1px;
margin-left:-1px;
height:500px;
width:80%;
}
I think that you want is to make bigger the button without making bigger the image. The image is getting bigger because it has a % size (it depends of his parent, in this case, the button).
Anyway:
.search-button:hover{} refers to: when you hover over the button do this to the button.
.search-button:hover .search-button-img{} refers to: when you hover over the button do this to the image.
Then you only need the change, that you want to do.
I am trying to achieve a simple rollover using image sprite. Unfortunately i am having trouble in setting the image in the center.
the a class should be a 26px width and 21px in height. but facebook holder should have 10px padding. It would be great if someone can look at my codes?
HTML
<div class="holder">
<div class="facebook-holder">
<a class="ss facebook" href="https://www.facebook.com/bendaggersdotcom" target="_blank"></a>
</div>
</div>
CSS
.holder{background:#a8a1a2; height: 50px; width:150px; padding:10px;}
.ss {display:block;height:21px;width:26px;background: url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png);margin-left:24px;float:left;
}
.facebook-holder { background:#FFF; max-width:46px; max-height:41px; height:100%;vertical-align:baseline; text-align:center;}
.facebook-holder:hover {background:#3b5998;}
.facebook {width:26px;background-position: 0px center; background-repeat: no-repeat; margin:0px; padding:10px;}
.facebook:hover {background-position:-26px; padding:10px;}
See it in action:
http://jsfiddle.net/bendaggers/qQFVV/
What im trying to replicate:
http://readwrite.com/2013/08/29/it-has-been-a-bad-summer-for-apples-ios-7#_tid=popular-feed&_tact=click+%3A+A&_tval=2&_tlbl=Position%3A+2
(notice the share buttons at the right side of your screens? yeah, that's right!)
By the way, feel free to modify everything if that would make it easier for you.
Thank you very much!
You are trying to change too many properties on hover.
The properties for the not-hovered state need to be
display:block;
height:21px; width:26px;
border:10px solid #FFF;
background: #FFF url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png) no-repeat;}
and then you only have to change the background colors and the background position for the sprite on hover.
border-color: #3b5998;
background-color: #3b5998;
so the specific styles for the facebook icon would be nothing but
.facebook {
background-position: 0 center; }
.facebook:hover {
background-position: -26px center;}
See updated fiddle: http://jsfiddle.net/qQFVV/1/
For my navigation bar, I have several buttons. When hovering over a button, I want the background image to change and I want the font color to change. The background image is changing fine but I can't get the font color to change. I included both .but1 and .but2 to give an idea of what each of the buttons look like but so far I've only edited .but1 for the hover text.
Any help would be appreciated. Thanks!
CSS:
#buttons {
width:665px;
background:url(images/bg_but.jpg) left top no-repeat;
text-align:center;
height:46px;
margin-left:450px;
}
#buttons a {
font-family:OVerlock, cursive;
font-size:20px;
display:block;
float:left;
height:34px;
text-decoration:none;
color:#303030;
padding-top:12px;
padding-left:0;
text-align:center;
}
.but1 {
background:url(images/but1-4.png) left top no-repeat;
width:134px;
}
.but1:hover {
color:#FFF;
background:url(images/but11.png) left top no-repeat;
}
.but2 {
background:url(images/but2.png) left top no-repeat;
width:132px;
}
.but2:hover {
background:url(images/but22.png) left top no-repeat;
}
HTML
<div id="buttons">
Home
Projects
Paintings
About
Contact
</div>
The selector #buttons a is more specific than .but1:hover, so it will take precedence.
Change it to #buttons .but1:hover and it will be more specific.
simply add your important into .but1:hover like the code below
.but1:hover {
color:#FFF !important;
background:url(images/but11.png) left top no-repeat;
}
I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.
HTML :
<div class="home"><span><em>40</em></span></div>
CSS :
.home{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
overflow:visible;
text-align:center;
white-space:nowrap;
height:40px;
line-height:34px; display:inline-block;
}
.home span, .home em{
display:inline-block;
height:40px;
line-height:34px;
margin:0;
color:#954b05;
}
.home span{
padding-left:15px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
}
.home em{
font-style:normal;
padding-right:20px;
background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}
See E.X In Action : HERE
My Problem : HERE
It's doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).
you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:-
.box {
border:1px solid #dadada;
width:50px;
height:50px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
check the live demo:- http://jsfiddle.net/ZysQa/3/
i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.