I have a link designed as button and and a real button.
For some reason the text of both have a different font-weight, despite of the same font-weight and font-size. How can I fix this?
The designed pseudo button:
.btn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
The real button:
input[type="button"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
Thanx!
Are you sure both use the exact same font?
With Arial both look pretty much the same to me:
HTML:
<input type="button" value="Input Button">
<div class="btn">Button Class</div>
CSS:
.btn {
font-family: Arial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
input[type="button"] {
font-family: Arial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
Codepen demo
Though there are still visible differences between browsers. If you want a light font for the button (and the same look in all browsers) it may be better to use an appropriate (web) font instead of font-weight: 100
-webkit-font-smoothing: antialiased;
font-rendering: geometricPrecision;
Related
How can I make this responsive? I want to change the width from px to %. But I don't get the same result. I want to maintain the size but I want it to be responsive.
.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
HTML:
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
There is nothing more I can say, so ill just add this text since it won't let me post this question because of too little words. Thanks in advance guys.
*, *:before, *:after{
box-sizing: border-box;
}
.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 310px;
height: 40px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.form-wrapper{
width: 300px;
}
.form-wrapper input{
width: 160px;
}
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
You can use "max-width" instead of width it will make it responsive and also maintain the width you don't need to make it in "%"
<pre>
.form-wrapper {
max-width: 450px;
}
.form-wrapper input {
max-width: 330px;
}
</pre>
I have a button and I need it to be lightning on hover
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
&:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: -4px -4px 4px rgba(250, 0, 20, 0.4);
But it has only a shadow in front of the button. How do a shadow all over the button?
in chrome dev tools you can edit box-shadow property using visual editor,
it's quite useful and you can build whatever shadow you'd like.
for current case don't forget to toggle :hover element state
and here's your code
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 20px 20px;
display: inline-block;
cursor: pointer;
transition: background-color .4s;
}
.button:hover {
color: white;
background: gray;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<a class='button'>Hello</a>
<style>
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
}
</style>
<html>
<button type="button" class="button">Click Me!</button>
</html>
Try
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<button class="button">click here</button>
Use box-shadow css as box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
I would like my appears on top of all others onmouseover !
But it does not !
Here is my CSS style with (display:inline-block) :
.changeMyTitle .two{
display: none;
text-decoration: none;
text-align: justify;
background-image: none;
background-color: yellow;
color: #000000;
font-size: 225%;
font-weight: bold;
font-family: serif;
padding: 5px;
border-radius: 100%;
-webkit-box-shadow: 25px 8px 10px 2px rgba(192, 192, 192, 0.8); /* WebKit */
-moz-box-shadow: 25px 8px 10px 2px rgba(192, 192, 192, 0.8); /* Firefox */
box-shadow: 25px 8px 10px 2px rgba(192, 192, 192, 0.8); /* Standard */
position: absolute;
z-index: 1;
opacity: 0;
}
.changeMyTitle:hover .two{
display: inline-block;
zoom: 1;
*display: inline;
opacity: 1;
}
I have a button with a style, and I want to change it to a new style without removing the existing style. So this is my currently button I have: http://jsfiddle.net/XaXg2/1/
HTML: <a id="login-button" class="s3d blue">Search</a>
CSS: #login-button { float: left; height: 28px; line-height: 28px; width: 100px; font-size: 15px; font-weight: 700; color: #FFF; border-radius: 4px; background: #AC3; text-align: center; cursor: pointer; }
I want to apply this new style without removing "login-button" style.
HTML: New Search
CSS:
a.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0,0,0,.3);
-moz-box-shadow:0 4px 5px rgba(0,0,0,.3);
box-shadow:0 4px 5px rgba(0,0,0,.3);
display: inline-block !important;
font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,.35);
width: 125px; }
a.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25,45,55,.9); }
a.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8); }
Use CSS specificity to override your original CSS. Add #login-button to your selectors:
jsFiddle example
#login-button {
float: left;
height: 28px;
line-height: 28px;
width: 100px;
font-size: 15px;
font-weight: 700;
color: #FFF;
border-radius: 4px;
background: #AC3;
text-align: center;
cursor: pointer;
}
a#login-button.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
box-shadow:0 4px 5px rgba(0, 0, 0, .3);
display: inline-block !important;
font: 700 13px/36px'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
width: 125px;
}
a#login-button.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25, 45, 55, .9);
}
a#login-button.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8);
}
I have two bits of text. One is in a paragraph element, the other is text for a submit button input.
Why is the font slightly thicker in the button?
Paragraph CSS (taken from Computed Style in Chrome Developer Tools)
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
float: left;
font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 16px;
margin-top: 11.199999809265137px;
width: 119px;
Input CSS (taken from Computed Style in Chrome Developer Tools)
-webkit-appearance: none;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(192, 192, 192);
background-image: -webkit-linear-gradient(top, rgb(75, 208, 179), rgb(38, 174, 144));
border-bottom-color: rgb(255, 255, 255);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(255, 255, 255);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(255, 255, 255);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(255, 255, 255);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: none;
border-top-width: 0px;
box-shadow: rgba(0, 0, 0, 0.65098) 0px 1px 3px 0px, rgba(97, 232, 203, 0.701961) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: 'Din Text Pro Regular', Arial, Helvetica, sans-serif;
font-size: 16px;
height: 41px;
letter-spacing: normal;
line-height: 16px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 11px;
text-align: center;
text-indent: 0px;
text-shadow: rgba(24, 97, 81, 0.34902) 0px 1px 0px;
text-transform: none;
vertical-align: baseline;
white-space: pre;
width: 159px;
word-spacing: 0px;
writing-mode: lr-tb;
I was able to put this at the top of my CSS. It seems to do the trick, at least so far:
button {
-webkit-font-smoothing: antialiased;
}
Apparently, Chrome as some kind of bug, in which it displays the fonts thicker depending on the brightness of its color.
More info here: https://code.google.com/p/chromium/issues/detail?id=163369
Edit: Found more related info and fix
Actually, it is a known bug:
I was able to fix this by following this article.
Kinda late, but it may still be usefull to some.