I am using CSS3 pie and am calling it by attached js files just before the head tag.
For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.
Below is the css.
.linkButton {
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
-pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
padding: 10px 10px 10px 11px;
display: inline-block;
color: #ffffff;
font-weight: bold;
box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
border: 1px solid #c85400;
text-shadow: #813700 2px 2px 1px;
line-height: 12px;
margin-bottom: 7px;
width: 326px;
display: block!important;
position:relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;`enter code here`
z-index:1;
}
First of all you don't need -pie-background for plain old image + background color.
If you do want to use -pie remember that paths are relative to html not css.
(I assume that you've set up mime-type etc and pie works for you in different cases.)
.linkButton{
behavior: url(PIE.htc);
}
Also, try adding a .index file with the following content in the same location as the PIE.htc file:
more info http://css3pie.com/
http://css3pie.com/documentation/
Try linking it without dots and slash like this:
-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;
Related
It's hard to see but on the INSIDE of the Border, left and right side only of the skewed rectangle, there is whitespace which is only there if I have a gradient background
https://imgur.com/a/fDcD8bi
my css:
padding: 50px 0;
margin: 0;
border-radius: 15px;
border-radius: 0;
border: 4px solid #717171;
transform: skewX(352deg);
box-shadow: -5px 10px 10px 0px #0b0b0b2b;
cursor: pointer;
background: rgb(41,41,41);
background: -moz-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: -webkit-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929",endColorstr="#3b3b3b",GradientType=1);
Any CSS magicians could help me with the whitespace on the inside? as I'd like to have the rectangle skewed with a gradient. But they don't work together so well. Thanks
My Css is as below i try to move the "+" icon to the right a bit but failed to move it, can anyone help?
.button-sec-icon {
background-color: #fdfdfd;
cursor:pointer;
background: transparent url("images/basicsetup/plus.png") no-repeat left!important;
margin-right: 5px;
border: 2px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 3px 1px rgba(0, 0, 0, 0.2);
color: #ca2b2b;
display: block;
height: 28px;
margin: 10px 0 0 60px;
transition: all 0.5s ease 0s;
min-width: 150px;
width: 121px;
}
.button-sec-icon:hover {
border :1px solid #888;
box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2);
}
You need to use background-position
background: transparent url("images/basicsetup/plus.png") no-repeat left!important;
So instead of using left, use
background-position: 10px 0; /* Parameters are X and Y respectively */
Can you just set the background-position to top right?
background: transparent url("images/basicsetup/plus.png") top right no-repeat !important;
Or even if you need it across a bit, use percentages or fixed widths:
background: transparent url("images/basicsetup/plus.png") 0 5% no-repeat !important;
background: transparent url("images/basicsetup/plus.png") 0 5px no-repeat !important;
You used the margin tag twice. "margin-right" and "margin". Delete the first "margin-right" and see what happens.
background-position: 10px 0px;
This should do the trick, background-position can be used in many ways.
Take a read here:
http://www.css3.com/css-background-position/
Currently I have creating some pure CSS buttons for a few customer pages. They display fine in all browsers except IE 8/10. They do however display the styles (mostly) if the css is applied as an inline style OR if I turn on compatibility mode (which is off by default).
Here is the page: http://www.americasfinestpolice.com/patrolmens-benevolent-association-custom-watches.aspx
#btn-a-1, #btn-a-3, #btn-a-5, #btn-a-7, #btn-a-9, #btn-a-11 {
outline: none !important;
cursor: pointer !important;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
-webkit-border-radius: .5em !important;
-moz-border-radius: .5em !important;
border-radius: .5em !important;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2 !important);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
color: #FFF !important;
border: solid 1px #F61208 !important;
background: #F61205 !important;
background-color: #F61205 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#F61205), to(#9F0601)) !important;
background: -moz-linear-gradient(top, #F61205, #9F0601) !important;
background-image: -ms-linear-gradient(top, #F61205 0%, #9F0601 100%) !important;
background-image: linear-gradient(to bottom right, #F61205 0%, #9F0601 100%) !important;
height: 1% !important;
width: 230px !important;
color: #FFF !important;
overflow: hidden !important;
display: block !important;
}
<div class="btn btn-1"><a href="/nycpbawatches.aspx">
<div class="btn-text btn-2">
NYC PBA Mens<br />Chronograph Watch<br />(CLICK HERE)
</div>
</a>
</div>
Please and thank you for your assistance.
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
I'm trying to design a button with orange background and rounded borders but the problem is background overflows. I cant see any problem on Chrome.
I used overflow: hidden but no help. Have any idea?
Here is the code:
display: inline-block;
padding: 8px 15px 6px;
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
Firefox
Chrome
What you probably want to use in Firefox is background-clip:
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
background-clip: padding-box;
Here's an example. Remember the background property will reset values for any of the sub-properties not specified, so put background-clip last.
If the box-shadow is not mandatory, remove it. That will fix the issue :)