i'm trying to use some jquery client side validation for my asp.net 2.0 webform.
and it seems that the normal input submit button can easily trigger the validation on click.
but i'm currently using a three divs made up image button for this page, thus it doesn't auto trigger the validation.
i was looking at css3 and found that it now support gradient, it's all nice and good except for the fact that i need to show an arrow image on the right side of the button.
i've tested with normal background image and background color to setup a button and it works. but i can't seems to get the same thing to work for a gradient background and a background image.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid Sans">
<style>
.button{
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(88,73,229)),
color-stop(0.63, rgb(115,103,255)),
color-stop(0.82, rgb(150,134,255))
);
-moz-linear-gradient(
center bottom,
rgb(88,73,229) 25%,
rgb(115,103,255) 63%,
rgb(150,134,255) 82%
);
color:#FCD3A5;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-weight: bold;
font-family:"Droid Sans",serif;
}
.orange{
background:-moz-linear-gradient(center top , #FF9300, #FF6800) repeat scroll 0 0 transparent;
border:1px solid #CFCFCF;
color:#FFFFFF;
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-family:"Droid Sans",serif;
background-image:url(arrow_right.png);
background-repeat: no-repeat;
background-position:right;
}
.button2{
background-color:#2daebf;
background-image:url(arrow_right.png);
font: 12px;
width:140px;
line-height: 28px;
height: 28px;
font-weight: bold;
color: white;
font-family:"Droid Sans",serif;
background-repeat: no-repeat;
background-position:120px;
border: 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.button3{
background: green; /* fallback for older/unsupporting browsers */
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(88,73,229)),
color-stop(0.63, rgb(115,103,255)),
color-stop(0.82, rgb(150,134,255))
);
background:-moz-linear-gradient(
center bottom,
rgb(88,73,229) 25%,
rgb(115,103,255) 63%,
rgb(150,134,255) 82%
);
border-top: 1px solid white;
background-image:url(arrow_right.png);
background-repeat: no-repeat;
background-position:120px;
}
</style>
</head>
<input class="button3" type="submit" value="SUBMIT"/ >
</html>
any ideas?
Google's Gmail/Docs/etc UI buttons accomplish this using some CSS trickery. You can see someone else's implementation here:
http://todc.github.com/css3-google-buttons/#button
Basically the buttons are actual href anchors <a> with gradients applied to them. Then there is a separate style that sets the background to an image using the ::before psuedo-selector. It's a little tricky to re-implement but it's obviously possible.
Can't be done: see this article
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background. You specify a gradient value instead of an image URL.
I'm sure webkit (safari/chrome) is probably the same way. IE doesn't support gradients.
My suggestion would be to wrap your submit button in a div element. Apply the gradient to the submit button, and the background image to the div and add a little padding to space it properly where needed. Or, use a <label> element for your submit button and apply the background images to the label.
Related
I'm trying to create a button that has two colors as a border.
The two colors i need used are blue: #00a7e1, orange: #f6531d.
I would like to just use css if possible.
Thank in advance!
link to button concept
Example:
.btn
{
border: 0;
padding: 4px;
display: inline-block;
background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
background: #349645;
padding: 8px 14px;
font: bold 24px Consolas;
}
.btn:active .bg
{
background: #0a1117;
color: #ffffff;
}
<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>
You may also play with gradient and background-clip (see comments in CSS)
button {
vertical-align: top;
border: 5px solid transparent;/* give extra space for gradients colors */
font-size: 2.5rem;
margin: 0.25em;
padding: 0.5em 2em;
background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
to bottom left,
rgb(230, 83, 0) 50%,
gray 51%,
rgb(0, 166, 224) 40%
)
no-repeat center center;
background-clip:
padding-box, /* drawn inside including padding area */
border-box;/* drawn also under borders */
background-size:
100% 100%,
110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
color: white;
box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}
<button>BUTTON</button> <button> TO</button> <button> PLAY</button>
If you think this is too much, you also have border-image .
Simply use border-image with a gradient:
button {
padding:20px;
border:5px solid;
border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
background:transparent;
}
<button>some text</button>
I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!
I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.
I've searched and found many questions and answers here but I just can't get this thing to work.
You can view my HTML and CSS here: http://jsfiddle.net/PqjqF/2/
HTML
<div id="SearchBox">
<div id="SearchFieldContainer">
<input class="SearchField" type="text" name="search" placeholder="Search..."/>
</div>
<div id="SearchButtonContainer">
Search
</div>
</div>
CSS
#SearchBox {
width: *;
background-color: #fff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d2d2d2;
height: 40px;
padding: 14px 8px 8px 8px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */
}
#SearchFieldContainer {
float: left;
width: 100%;
}
#SearchButtonContainer{
float:left;
}
.SearchField {
border: 1px solid #bdbdbd;
background: #f5f5f5;
-webkit-border-radius: 60px;
border-radius: 60px;
color: #0a0705;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
padding:8px;
margin-bottom:20px;
width:100%;
}
.SearchField:focus {
background: #fff;
color: #000000;
}
.SearchButton {
-webkit-box-shadow: 0px 2px 2px 0px #8a8a8a;
box-shadow: 0px 2px 2px 0px #8a8a8a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011) );
background-color:#2f3c47;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #0d060d;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:5px 18px;
text-decoration:none;
}
What I want to have is that the input field will take all the space it has and the search button to be next to it, on the same line.
I tried so many things like hidden overflow and other but it refuses to work :-/
Any help here?
Thanks,
- Shai
Change your HTML a bit to let div#SearchButtonContainer appears before div#SearchFieldContainer.
Add margin-right to div#SearchFieldContainer make enough room for the button. Remove its float: left; style, then it will spread 100% width by default (with some margin at right);
Add float: right; to div#SearchButtonContainer.
View the modified example at jsFiddle
Hm, just try:
#SearchFieldContainer {
float: left;
width: 50%;
}
#SearchButtonContainer{
float:left;
width: 50%;
}
So both divs take each 50% of the width = 100% width. Some more work is need for perfect fit, but basically it should work. Remember to "clear" (If you don't know, look for clear:both).
You're issue is that certain things aren't adding up to 100%. For example the text field itself is set to 100% width but has padding which makes it larger than 100%. If you wrap the text-field in a border you can see it extends past it's containing div. There are a few ways to fix this... Either remove the paddings, calculate the paddings into your total 100% widths, or use the CSS: box-sizing: border-box; Which tells the browser to calculate the width including padding and borders.
The same is true for both of your containers.
I will use the box-sizing method I mentioned above first...
See the following fiddle: http://jsfiddle.net/PqjqF/4/
Here I have added box-sizing: border-box; to both of your containers, the text field and button. I left the borders in place so you can see the edges of your containers. (this is a great technique for debugging your layouts to see where your boxes are)
I have changed width of the containers to 80% and 20% respectively and set the width of the text-field to be 100%. You could also apply a 100% width to the button to make it fill it's container.
See the Can I Use It? for box-sizing for browser compatibility.
Now a solution without box-sizing: border-box;...
See the following fiddle: http://jsfiddle.net/PqjqF/5/
Here, I have calculated the padding's as a percentage, in this case 1% into the width of the element itself. So, 1% to padding left and right (top and bottom doesnt matter), and 98% width = 100%.
i am using enyo buttons in iphone....the problem is , when i click on button for a navigation , black color appears over the button....i dont know whether it is shadow or border-color or background-color.... i want to remove this...plz help me....
my code goes here
.onyx-Button2 {
outline: 0;
color: #FFFFFF;
font-size: 16px;
text-align: center;
white-space: nowrap;
margin: 0;
padding: 1px 1px;
overflow: hidden;
border-radius: 3px;
/* for IE8 */
border: 1px solid #777;
border: 1px solid rgba(15, 15, 15, 0.2);
/*
The border and the gradient interact in a strange way that
causes the bottom-border (top if the gradient is aligned top)
to be lighter than other borders.
We can fix it by using the darker bottom border below, but
then there are a few rogue pixels that end up very dark.
*/
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom;
background-size: contain;
text-overflow: ellipsis;
}
It is possibly down to defaults set within the browser on iOS - I would set all the appropriate properties to cover all bases.
So add
background-color:#ffffff; // Change this to your color you want
I suspect it is just the way iOS defaults some CSS, it may also have something to do with the manner in which it deals with image's as backgrounds. Unfortunately while iOS goes with most standards, it has odd ways of implementing certain CSS.
I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge.
In Adobe Illustrator I have created the following 'button' style.
To create this image I created a rectangle with a background colour of rgb(63,64,63) or #3F403F, then 'stylized' it to have a 15px border radius.
I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center. Finally, I applied a 3pt white stroke on it. (I'm telling you all of this in case you wished to reproduce it, if the image above isn't sufficient.)
So, my question is thus:
Is it possible to recreate this 'button' using CSS without the need for an image?
I am aware of the 'limitations' of Internet Explorer (and for the sake of this experiment, I couldn't give a monkeys). I am also aware of the small 'bug' in webkit which incorrectly renders an element with a background colour, border-radius and a border (with a different color to the background-color) - it lets the background color bleed through on the curved corners.
My best attempt so far is fairly pathetic, but for reference here is the code:
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid rgb(255,255,255);
background: rgb(98,99,100);
background: -moz-radial-gradient(
50% 50%,
farthest-side,
#626364,
#545454
);
background: -webkit-gradient(
radial,
50% 50%,
1px,
50% 50%,
5px,
from(rgb(98,99,100)),
to(rgb(84,84,84))
);
}
Basically, terrible. Any hints or tips gratefully accepted and thank you very much in advance for them!
It seems like you're trying to produce a gradient to replicate this:
"I then applied an 'inner glow' to it with a 25% opacity, 8px blur, white from the center."
You can do exactly that using an inset box-shadow. For example:
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
With no extra markup:
Radial gradients are very difficult to control, and work much more differently across browsers than linear gradients do. And, unlike an inner glow, they will actually be circular rather than matching the mostly-rectangular contours of your box.
Since every browser that allows box-shadows also allows rgba and multiple-backgrounds, I would use a combination of two linear gradients, stacked and using rgba colors - one horizontally and one vertically. Something along these lines (replacing my colors with what you need):
section#featured footer p a {
background-color: #000;
background-image: -moz-linear-gradient(
left,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
), -moz-linear-gradient(
top,
rgba(255,255,255,.5),
rgba(255,255,255,0) 10%,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.5)
);
background-image: -webkit-gradient(
/* webkit's syntax for the same horizontal gradient */
), -webkit-gradient(
/* webkit's syntax for the same vertical gradient */
);
}
You can also create a radial gradient that goes from white to transparent on an overlayed div. I used this awesome css3 generating tool that gives you the all the needed css3 for cross browser compatibility.
http://www.colorzilla.com/gradient-editor/
Hope this helps somebody!
Well I got to say... your question interested me a lot so I went at it.
I found a solution, but it does use a nested <span> tag which is a little uncouth, but it is practically identical to your image.
Here's what the HTML looks like:
<span>Carry on reading →</span>
Notice the nested <span> inside of the <a>. The non-breaking spaces are just there to give the arrow the same amount of room you have in your picture.
And here's the CSS:
a.dark-button {
font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
color: white;
text-decoration: none;
background-color: #555;
border: 3px solid white;
-moz-border-radius: 15px; padding: 5px 3px;
text-shadow: 1px 1px 2px #111;
}
a.dark-button span {
background-color: #666;
padding: 2px 12px;
-moz-border-radius: 15px;
-moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666;
}
Basically to get the inner-glow effect, I did an outer glow (in the form of a drop shadow) from an inner element. Hope that makes sense.
To see it live: http://ianstormtaylor.com/experiments/css-buttons
Have fun!