my problem seems to be quite simple. I want to create the button which is png and has hover via .png also. I need this for email campaigns becouse Outlook doesn't understand some css attributes.
I tried make it simple
.button {
border: none;
background: url(/image1.png);
}
.button:hover {
border: none;
background: url(/image2.png);
}
And everything is just white. Any help will be great :)
according to documentation, you should do it like that,
background: url("/image1.png");
.button {
width: 50px;
height: 50px;
border: none;
background: url("https://i.stack.imgur.com/teLso.jpg?s=48&g=1");
}
.button:hover {
border: none;
background: url("https://graph.facebook.com/160520007817300/picture?type=large");
}
<button class="button"></button>
You have an error, use the simple, or double quotes "" - '', an example:
button{
background: url('https://s-media-cache-ak0.pinimg.com/736x/24/fe/e1/24fee13b4dc475c435984ab0aa1b8ecb.jpg');
background-size: 500px 100px;
background-position: center;
width: 500px;
height: 40px;
}
<button> Example button </button>
Same with any of the other html elements.
Related
I’m really new to coding, and as a result, I’m having a bit of difficulty solving a problem that I have encountered. I am currently attempting to create a login page for practice, but when both the “Sign in to Google” and the “Sign in” button retain the same appearance no matter what I try to do. They work just fine, it is just the appearance that’s the issue. The “Sign in button will always emulate the appearance of the “Sign into Google button, no matter what changes I make to it. Any help would be appreciated.
<button type="button"><strong></strong>Sign in with Google</button><br><br>
<style>
button {
display: inline-block;
background-color: #e6e6e6;
padding: 12px;
width: 330px;
background-image: url("IMG_0045.jpg");
background-size: 20px;
background-repeat: no-repeat;
background-position: 25%;
}
a {text-decoration: none; color:black;
}
</style>
<button type="button" class="submit">Sign In</button>
<style>
button {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
</style>
In your CSS you are using the button selector. That means it will apply that style to any <button> element in the HTML. The way CSS works is that the most recently stated rule overwrites the previous ones. So it makes sense that only
button {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
}
Is showing up, what you want to do is give each button an id or a class
With <button id="signInButton">
You can use the CSS selector for that ID and it will apply those styles only to that button, so
#signInButton {
display: inline-block;
background-color: e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
}
Would only apply to the button with that ID
I would recommend checking out an HTML and a CSS tutorial from W3schools, they teach you the fundamentals and they helped me a lot.
here's a working snippet but accept the previous answer as #Da Mahdi03 clearly showed then way
button {
display: block;
background-color: #e6e6e6;
padding: 12px;
width: 330px;
height: 50px;
background-image: url("IMG_0045.jpg");
background-size: 20px;
background-repeat: no-repeat;
background-position: 25%;
margin-top:16px;
}
a {
text-decoration: none;
color: white;
}
#google{
background:blue;}
#signin{
background:red;}
<button id='google' type="button"><strong>Sign in with Google</strong></button>
<button id='signin' type="button" class="submit">Sign In</button>
So my website should be multilingual. To let the user change between languages there will be flags in a dropdown.
To get a better resize ability for my images (of the flags) I wanted to create them soley via CSS. However I failed doing this, so I created little 1x3 and 3x1 .jpgs files which I wanted to resize via CSS.
Here are 2 examples I created:
(Most likely you should just download the pictures and scale them really high to understand what I did.)
My plan was using the image-rendering properties pixelated to get a resized images without any smoothing or color gradients and it worked fine until I used IE.
I created a little code snippet to recreate the basic idea:
.ger {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1, #flag2{
width: 120px;
height: 45px;
}
<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>
But I guess I'm too new to this topic to be able to do it right. Because somehow it won't show the german flag to you.
Anyways... I can't ask you to make IE starting to support this function. But what I can ask is if you know some way to work arround this.
If not, do you know some way to create these simple flags just using CSS?
I was thinking of three divs of different colors beneith each other.
For example:
.black, .red, .yellow{
width:800px;
height:100px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>
... for the german flag.
But if I try to implement something similar into my dropwdown...
I fail...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, #dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.black, .red, .yellow{
width:60px;
height:10px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
<ul>
<li><a class="logo">Logo</a></li>
<li class="dropdown">
<div class="black"></div><div class="red"></div><div class="yellow"></div>
<div class="dropdown-content">
Flag 1
Flag 2
Flag 3
</div>
</li>
</ul>
Because if I do it like this, it will never have the full size of the bar, will it?
I'm sorry for providing so much information, because it's propably just too much. However these were my attempts and I really have no clue what I'm missing out onto.
In the ende the bar (shown in the last snippet) should contain a flag. The flag should touch the right and upper border of the window and the bottom broder of the bar. If you hover over it a dropdown should appear with similar flags.
If I wasn't clear at some point just ask I will try to make it clearer.
The problem with the first snippet is that there were <style> tags in the CSS section of the snippet, and that was messing it up.
.ger {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(http://i.stack.imgur.com/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1,
#flag2 {
width: 120px;
height: 45px;
}
<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>
I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.
Here is what I have so far
HTML
<button class="green_btn" type="submit" name="cnp">News Control</button>
CSS
button {
margin: 0 auto 5px auto;
display: block;
width: 134px;
height: 35px;
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
border: 0 none;
font-weight: bold;
text-align: center;
color: #fff;
cursor: pointer;
}
.grey_btn button {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button {
background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
background: url('../images/red_btn_bg.png') no-repeat left;
}
by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.
Anyone have any ideas?
You're targeting your class improperly with .class-name button. That is actually looking for an element with a child button.
Here you go...
button.grey_btn {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn {
background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
background: url('../images/red_btn_bg.png') no-repeat left;
}
Your classes are looking for a button inside an element with a colour class. For example:
.red_btn button
...is looking for a button inside a parent element with the class red_btn. It should in fact be:
button.red_btn
...though the button part of the selector is probably redundant unless you have other elements of different types with the same class names.
For anyone that ends up here who, like me, wasn't sure how to change a button's background color...
Instead of this in your CSS file:
#footer_join_button {
background-color: $light_green;
}
... or even:
#footer_join_button {
color: $light_green;
}
... the correct attribute/property to target is simply background:
#footer_join_button {
background: $light_green;
}
Note: I'm using SASS precompiler, hence the potentially strange-looking $light_green variable above.
I have got a little problem with setting a background image for <button>.
Here is the html I have got on site:
<button id="rock" onClick="choose(1)">Rock</button>
And here is the CSS:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
}
button #rock {
background: url(img/rock.png) no-repeat;
}
I don't know why the button's background is still white.
Astonishing that no answer addresses or mentions the actual problem here.
The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).
And as #Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.
For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:
#rock {
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
Live test case.
You need to call CLASS in button
<button class="tim" id="rock" onClick="choose(1)">Rock</button>
<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
Replace
button #rock
With
#rock
No need for additional selector scope. You're using an id which is as specific as you can be.
JsBin example: http://jsbin.com/idobar/1/edit
Delete "button" before # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.
Try changing your CSS to this
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place
To get rid of the white color you have to set the background-color to transparent:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
You absolutely need a button tag element?
because you can use instead an input type="button" element.
Then just link this CSS:
input[type="button"]{
width:150px;
height:150px;
/*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 150px 150px;
}
<input type="button"/>
try this way
<button>
<img height="100%" src="images/s.png"/>
</button>
I am currently working on an HTML5 form and using CSS3 for the styling. I have added CSS for input:required and input:valid and input:invalid to make an image get shown inside the text box.
Both the required and invalid CSS work fine but for some reason input:valid gets ignored and is just replaced with the same image as input:required.
Below is the CSS that I have used
input:required.fields, textarea:required.fields, select:required.fields
{
background:url("images/asterix.png") no-repeat;
background-position: right;
width: 200px;
background-color: white;
}
input:focus:required:invalid.fields, textarea:focus:invalid.fields, select:focus:invalid.fields
{
background:url("images/error.png") no-repeat;
background-position: right;
width: 200px;
background-color: white;
opacity: 1.0;
}
Both CSS sections above work fine without any problems but its the CSS below that for some reason is not working.
input:valid.fields, textarea:required:valid.fields, select:value.fields
{
background:url("images/tick.png");
background-position: right;
width: 200px;
background-color: white;
opacity: 1.0;
}
In case it was to do with the image not being found I made the invalid image be the tick.png image and this worked fine but the valid section never seems to get called.
Thanks for any help you can provide.
I just used the following on my form:
input[required]:invalid {
background: #efdee0 url(../images/invalid.png) no-repeat center right;
}
input[required]:valid {
background: #f3f8ed url(../images/valid.png) no-repeat center right;
}
but then my fields are all required (http://www.paul-ellis.co.uk/contact.htm)