How to implement this button in HTML / CSS? - html

This is a button that has been originally implemented and styled in Silverlight.
How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border width should be adjustable but uniform size around the button.
The red colour in the example picture is page background, not part of the button.
Button screenshot http://i52.tinypic.com/2vsetlw.png
UPDATE: Forgot to mention, I would prefer a solution without images, ie. pure-css. Css3 is fine, I don't need to support IE6-8 for example.

I know it's not the most helpful thing to spoon-feed sometimes, but I had needed a break from work.
Demo: http://jsfiddle.net/wesley_murch/SzHQZ/
Looks nice in FF4 and Chrome, IE falls back to decent looking (though you could fix it with PIE).
Here's the CSS I used, I got the gradient code from some random online generator so it might not be optimal. There's too much contrast as well compared to your image, so just fine tune it.
<button>
<span>
Sign in
</span>
</button>
button {
border:0;
padding:3px;
background:#735544;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #271D1B),
color-stop(0.59, #735544)
);
background-image: -moz-linear-gradient(
center bottom,
#271D1B 18%,
#735544 59%
);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
--- Needed this break to get markdown to behave...
button span {
display:block;
color:#fff;
font:900 18px arial;
text-transform:uppercase;
padding:.35em 1.3em;
background:#382B25;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #382B25),
color-stop(0.59, #C2A489)
);
background-image: -moz-linear-gradient(
center bottom,
#382B25 18%,
#C2A489 59%
);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

Looks like the boring version of http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba :)
you can take the example from there and just change the colors, probably want to replace
border-bottom: 1px solid #222;
with something like
border: 3px solid brown;
The example above uses an alpha-blended png for the gradient, but you can also go for css3 gradients, see http://css-tricks.com/examples/CSS3Gradient/ for a good cross-browser example.

Just save the image as a background
<input type="submit" class="btnSqueareInput" name="commit" value="SIGN IN"/>
btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}
where square.png is rge image of the button w/o 'SIGN IN'

Related

Ugly edge when using gradient

I'm trying to create a 2 coloured background to use it as the background for my text container. To get two different colours I've used a gradient. Let me show you what it looks like now.
If you look closely, you can see the line in the middle looks kind of, I don't know what to call it, lets just say it doesn't look smooth.
Here's my css:
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}
Giving a small gap between the two color stops points (like 49.5% and 50.5%) did the trick.
You can try this style here: https://jsfiddle.net/dnn02d64/4/
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}

Button text position differs from browser

Button text position differs whether it in firefox/chrome or opera/ie.
I have a button and text in it. In opera it goes little bit lower than in firefox.
HTML:
<button>
some
</button>
CSS:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
}
How can I prevent this "jumping" of text button?
Also a bonus question: may be someone knows how to prevent this different visions of font-weight in browsers?(see the images)
P.S. I googled it - hadn't found the answer
EDIT: FIDDLE
EDIT_2: Browsers are updated to the last versions. (May be excluding the IE, but the issue is in opera too). OS: Windows 8.1 Industry Pro
You haven't defined the font-size and font-weight, so the different browser is taking button font as it's own. Setting these explicitly solves the problem:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
font: 16px normal Arial;/*change as per your requirement*/
}
Update:
I came to the across solution for the key problem with button tag. The default style for button is display: inline-block;.
And the different browsers do have different vertical-aligning (top, middle, ...), thus fixing vertical-align to the button will fix the issue.
So, far for the button css, add this line of code:
vertical-align: middle;
In Explorer Windows and Opera there turns out to be a difference
between font-weight: 600 and font-weight: bold...
http://www.quirksmode.org/css/tests/iewin_fontweight.html
Use font-weight: 700;.
button {
position: relative;
width:145px;
height:36px;
line-height: 36px;
border: 0;
color:#fff;
font-size:16px;
font-weight:700;
border-radius: 10px;
font-family:"Myriad Pro", "Verdana", sans-serif, serif;
background: -moz-linear-gradient(top, #00a885 49%, #009979 54%);
background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
margin:0;
margin-top:14px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
padding: 0;
}
<button>some</button>
So I found the problem.
I used font-family "Myriad Pro" which was installed with Photoshop. Every browser seems like renders different this font, so after font-family change the problem has gone.
Quite tricky to find but easy solution...

Two color border

I know it is possible to have the effect of a double border with one below the other but is it possible using css to have part of the width of a border one color and the rest another color?
Here is an example of an image that I would like to recreate as a border using css only:
I think I figured out one way to do it. Check this out http://jsfiddle.net/RE4A7/
html
<ul>
<li><h3>Mission</h3>
</li>
</ul>
css
ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}
UPDATE:
Seeing that the line in the post is actually a two colored line you can use the border-image property to achieve a similar effect (example showing only the principle but is not adjusted for perfect match):
ONLINE DEMO
CSS:
div {
border-top:0;
border-bottom:1px;
-webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
/* ... */
}
For other browsers:
-moz-border-image:
-webkit-border-image:
-o-border-image:
border-image: /* standard */
Note that the gradient parameter varies from browser to browser apparently so this need to be adjusted as well. Demo provided will only work with webkit browsers.
Old
Do you mean something like this:
For this you can use the following CSS:
.myClass {
height:40px;
width:60px;
border:5px solid #00a;
box-shadow:0 0 0 5px #f00 inset;
padding:5px;
}
Here the box.shadow set to inset with no blur acts as the second part of the border. The padding should prevent content from overlapping.
ONLINE DEMO

Weird White Line appears on buttons in Internet Explorer

I have a critical HTML issue: a weird white line appears on buttons in Internet Explorer.
Example of Original Mockup -
Button HTML -
<input type="button" Class="buttonAll" value="Regenerate" onClick="Captcha();"/>
<input type="submit" value="Save" onclick="" class="buttonAll">
My UI HTML does not include any Doctype and I have a criteria to do only Cosmetic changes.
I tried to Apply CSS in 2 ways:
Using BG Image -
CSS for the above:
background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;
Using CSS Gradient -
CSS:
input[type="button"], input[type="submit"], .buttonAll {
overflow:visible; display:inline-block; cursor:pointer;
outline:0px none; width: auto; vertical-align:middle;
margin:3px 6px 3px 0px; padding:2px 6px; border:1px solid #804240;
/*background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;*/
background: #92110d; background-repeat:repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#f04b47), to(#92110d));
background: -moz-linear-gradient(center top, #f04b47, #92110d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04b47', endColorstr='#92110d');
text-align:center; text-transform:capitalize; color:#fdfad9; font-size:11px!important; }
Both of the above code works well in FF and Chrome.
Is there is any possibility that it happens due to Events Focus / Active / Blur
I want to know how can I remove this white Line?
you need to remove border from input field for example input[type="button"], input[type="submit"], .buttonAll { border:none;}
Vipul above code is right. reason is your doctype declaration. because there is two type of document modes 1. strict mode, 2. quirks mode. Quirk mode doesn't support W3C modern standards.

Simulate image "overlay" with CSS

Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.
There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.
How can I make it so each active menu link uses the corresponding slice of the blue image?
Like this:
My code so far
Do you think this is possible with CSS?
CSS Only solution for modern browsers:
ul {
background-color:#ff00ff;
background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
height:50px;
width:400px;
margin:0;
padding:0;
border-radius:25px;
overflow:hidden;
}
li {
width:100px;
height:50px;
float:left;
}
li:hover {
background-color:rgba(0,0,255,0.2);
}
Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/
If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:
You can cut out the blue image of the entire thing (you can actually make it wider)
then
li.active {
background: url('path/to/yourImage.png') no-repeat -50px 0;
/* 50px or however wide that rounded tip is */
}
li.active.first {
background-position: left top;
}
li.active.last {
background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */
Are you ever going to have links at the rounded parts? If not, you could just take a pixel-wide slice of the blue image and set that to the :hover state background with repeat-x.
There are definitely other ways to do this but this is the most straightforward IMHO.
Edit: After seeing your fiddle, perhaps this isn't the case. I would consider using JavaScript to calculate appropriate x-offsets for each link, and using a slice of the overlay image in that way. Or you could just make the first link a "special case" and use a generic different-color background for the rest of the links.