I'm using Bootstrap and sometimes it is hard to overwrite it.I want to add some picture to my button, near text. So I added background-image, but it doesn't apply.
Here is css for my button:
.submit .report{
font-size: 18px;
text-shadow: none;
font-weight: bold;
padding: 5px;
width:300px;
color:white;
filter:alpha(opacity=100);
background: #628d28;
background-image:url('../images/picture.png') no-repeat;
}
BUT Firebug say, that my element has next CSS:
.submit .report{
font-size: 18px;
text-shadow: none;
font-weight: bold;
padding: 5px;
width:300px;
color:white;
filter:alpha(opacity=100);
background-image: none repeat color(98,141,40);
}
Why I can't add background image ?
You define wrong background properties. Write like this:
.submit .report{
background-color: #628d28;
background-image:url('../images/picture.png');
background-repeat:no-repeat;
}
OR
.submit .report{
background: #628d28 url('../images/picture.png') no-repeat;
}
Related
In my HTML I have the following:
Knowledge Base
<br />
In my CSS I have the following classes:
.button1 {
display: block;
height: 25px;
width: 130px;
background: #ffffff;
border: 2px solid #000000;
Color: #000000;
text-align: center;
margin-left: auto;
margin-right:auto;
padding-top:10px;
font-weight: 700;
}
The link color is blue, I want to make the link black with white background. I want to change this on hover by making the background black and the link color white.
I can't make it by using the following CSS class:
.button1 a:hover {
background: #393939;
Color: #ffffff;
}
Do I have to change my HTML to be:
<button class="button1" id="save">Sample button</button>
Please advice. I appreciate your support
Is that something like that http://codepen.io/anon/pen/vNMLar ?
a.button1:hover {
background: #000;
Color: #fff;
transition: all 0.2s ease-in-out;
}
it should be
a.button1:hover {
background: #393939;
color: #ffffff;
}
.button1 is already your link. What you did is tell to look for a link inside .button1
EDIT: also the name for the attributes is lower case
Quick CSS/HTML issue here, please excuse my lack of experience in the field.
I have a download button that I would like to change from having white text to having grey text on hover. Currently the text is white, however despite my defining of a :hover attribute to change the color, it remains white. Here's my code:
HTML:
<a id="postLink" class="button2" href="#">Post</a>
CSS:
.button2 {
display: inline-block;
width:163px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #EFEFEF;
border-radius: 8px;
background: #589edb;
font: normal normal normal 20px raleway;
text-decoration: none;
z-index:150;
}
.button2 :hover{
color:#555555;
}
.button2:focus {
border: 1px solid #EFEFEF;
background: #589edb;
background: -webkit-gradient(linear, left top, left bottom, from(#6abeff), to(#6abeff));
background: -moz-linear-gradient(top, #589edb, #589edb);
background: linear-gradient(to bottom, #589edb, #589edb);
text-decoration: none;
}
.button2:active {
background: #589edb;
color:#FFFFFF;
}
#postLink{
color:#FFFFFF;
&:hover{
color:#55555;
}
}
Thanks!
Your .button2 :hover should be .button2:hover the whitespace screws it up ;)
I would remove the
#postLink{
color:#FFFFFF;
&:hover{
color:#55555;
}
}
as it adds nothing and might screw up your code. Are you using LessCSS or SASS? Otherwise, &:hover will not work. Then the #postLink will prioritise over the class and will keep it white.
How can I fix this because if the text is long the button will be longer.
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
you need to set a width and height for your button and to centre text horizontally and vertically use the following:
width:120px;
height:50px;
text-align:center;
line-height:1.1em;
font-size:1.1em;
width and height can be set to match your desired measurements.
This can be used for future demonstration:
https://jsfiddle.net/j9njkwkq/
EDIT:
of course you can add cursor:pointer in order to get the "right" button effect on a browser.
In this case you should use. min-width attribute.
Use min-width:100px
Add width to the style definition, for example:
max-width: 100px;
or just:
width: 100px;
https://jsfiddle.net/ghc9aw3w/
Of course you have to adjust the value to the text's required length.
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width:200px
}
button:hover {
background: #3E3E3E;
}
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
You could make a wrapper and than set the width to 100%
#login {
width: 300px;
}
button {
border: none;
padding: 1.1em 6.5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
width: 100%;
}
button:hover {
background: #3E3E3E;
}
<div id='login'>
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>
Give "width" for the class .md-trigger or button to make that same even if long text is entered.
For perfect styling wrap the contents inside a div
https://jsfiddle.net/ghc9aw3w/2/
<div class="btnwrap">
<button class="md-trigger" data-modal="modal-1">Login</button>
<center><p>Or</p></center>
<button class="md-trigger" data-modal="modal-2">Register</button>
</div>
then the style would be
.btnwrap{
width:200px;
overflow:hidden;
}
button {
width:100%;
display:block;
border: none;
padding: 1.1em 5em;
background: #00abc6;
color: #fff;
font-family: 'TitilliumText22LRegular', Arial, sans-serif;
font-weight:bold;
font-size: 1.1em;
border-radius: 0px;
text-align:center;
}
button:hover {
background: #3E3E3E;
}
i want to make and style submit buttons i.e.
input type="submit" style="buttonClass">
using CSS and provided images, that works on both hover as well as normal state, however i'm unable to reach the desired output.
I created the buttons using anchor tags and span which are perfect but i want the same look and feel for submit buttons also.
PS: i cannot use the moz and webtooolkit of css3 as my target browser will be IE7 and IE 8, and further i have to use the client provided images only.Is there any way around for submit button<input type="submit"> to reach the desired output just similar to the buttons as created using the anchor buttons <a><span></span></a>?
HTML AS IS
<a class="buttonImage" href="javascript:blankCheck('Approve');"><span> <bean:message key="button.common.submit"/> </span></a>
HTML TO BE
<input type="submit" class="buttonImage">
CSS AS IS for buttons using anchor
.buttonImage span {
background: url('common/images/LeftButton.png') no-repeat 0 0; display: block;
line-height: 14px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.buttonImage
{
background: url('common/images/RightButton.png') no-repeat top right;
display: block; float: left; height: 26px; margin-right: 6px;
padding-right: 7px; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
font-size:12px; font-weight:bold;
}
.buttonImage:hover span {
background-position: 0 -26px; color: #fff;
}
.buttonImage:hover {
background-position: right -26px;
}
Live Demo
Hi now change to some properties your css stylesheet or add two div in your anchor tag
as like this
Please check to this
Css
.buttonImage{
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left; line-height: 15px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.right_img{
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left; height: 27px;
width:7px;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img{
background-position:0 -26px;
color:#fff;
}
HTML
<a class="buttonImage" href="javascript:blankCheck('Approve');">
<span class="left_img"> <bean:message key="button.common.submit"/>Hello this is coding
</span>
<span class="right_img"></span>
</a>
Demo
I've got a select in my site. With the following:
...
<select name="opening-form-gender" id="opening-form-gender">
<option value="f">Female</option>
<option value="e">Male</option>
</select>
...
CSS:
#opening-form {
background-image: url('../img/opening-form-bg.png');
background-repeat: no-repeat;
height: 139px;
margin: 40px auto;
padding: 20px;
}
#opening-form p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#666666;
}
#opening-form strong {
font-size:20px;
}
#opening-form .submit {
background-image: url('../img/red-submit.png');
border: none;
width: 115px;
height: 31px;
line-height: 28px;
}
#opening-form .submit:hover {
background-image: url('../img/red-submit-hover.png');
}
So, its have a style problem. How can i fix it?
This is jsfiddle page:
http://jsfiddle.net/HLEcS/
Try something like;
select{
width: 175px;
border: 1px solid #e7e7e7;
background-image: url('../img/input-bg.png');
font-weight: regular;
font-size:12px;
color: #666666;
padding: 7px;
}
Here is the modified fiddle.
On WebKit (Chrome, Safari), you can disable the native style and customize it with your own by applying the property:
-webkit-appearance: none;
Unfortunately, this doesn't work in Gecko (Firefox). See https://bugzilla.mozilla.org/show_bug.cgi?id=649849
The dotted border on Firefox is caused by the default property outline. See How to remove Firefox's dotted outline on BUTTONS as well as links?
The alignement should be fixed by applying a vertical-align: top to the parent. Please provide the full HTML or a Fiddle to test.