I was trying to set the style of a button in my page: http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2010# (click on any QP or MS link) but chrome is overriding it or something I don't know, It's crossing out my css everything is in thic picture: http://s10.postimg.org/5v8htii4p/Untitled.png
This is the code that should be applied on the button but it wasn't
.button {
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #eeeeee;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color- stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
background: linear-gradient(top, #fbfbfb, #e1e1e1);
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
border: 1px solid #d4d4d4;
height: 32px;
line-height: 32px;
padding: 0px 25.6px;
font-weight: 300;
font-size: 14px;
font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
color: #666666;
text-shadow: 0 1px 1px white;
margin: 0;
text-decoration: none;
text-align: center; }
Related
I have a button with a function that adds selectboxes to the page. I have a H1 with some text, a button, and boxes that are added above the button. I want the button the be right under the H1, but when I add selectboxes it will be pushed down.
This is what is currently happening, the button follows the select-boxes:
CSS
#interesses select{
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 1%;
width:30%;
margin-right: 2%;
margin-bottom: 15px;
padding: 0%;
font-size: 18px;
float: left;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
line-height: 1.5;
height: 38px;
-webkit-appearance: none;
}
#interesses-option{
float:left;
display: block;
position:inline;
margin-bottom: 25px;
}
.wide-button-thin{
width: 30%;
height: 40px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 18px;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
color: #494d59;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 2px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}
It works if I insert two <br> before the button, but I didn't get it to work with margin-top. Any suggestions what I could try?
EDIT:
Here are jsfiddle: http://jsfiddle.net/DWtPt/
To fix this, you should only move the button code above the interesser id like this:
<div id="velg-interesse">
<h2>Legg til interessene dine under:</h2>
<input type="button" class="wide-button-thin" id="leggtilInteresse" value="Legg til interesse">
<div id="interesser"></div>
</div>
Can you help me to find css of "Submit Listenig" button?
I want to change primary color.
http://demo.sabaiapps.com/sabaidirectory/businesses/add
.sabai-btn {
display: inline-block !important;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.menu-toggle, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input[type=submit], li.bypostauthor cite span
style.css - Line 238
The button uses CSS gradients for background color.
http://css-tricks.com/css3-gradients/
input[type="submit"].sabai-btn { background-image: linear-gradient(to bottom,#c8d6ff,#c8d6ff); }
This code changes only submit button. But hover effect changes. It hover only on half button.
I have issue with my submit button. It is one pixel lower than txt input, but only in Safari. Chrome and Firefox are just fine.
input[type=text] {
height: 45px;
width: 238px;
padding: 0;
background-color: #ebebeb;
border: 1px solid #cecece;
border-radius: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
color: #999999;
font-size: 16px;
font-family: 'Noticia Text', serif;
padding-left: 20px;
}
input[type=text]:focus {
outline: 0;
}
#subscribe {
padding: 0;
margin: 0;
background: #3eb0ef;
background: -moz-linear-gradient(top, #3eb0ef 0%, #1b8dd4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3eb0ef), color-stop(100%,#1b8dd4));
background: -webkit-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: -o-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: -ms-linear-gradient(top, #3eb0ef 0%,#1b8dd4 100%);
background: linear-gradient(to bottom, #3eb0ef 0%,#1b8dd4 100%);
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eb0ef', endColorstr='#1b8dd4',GradientType=0 );
border-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #1082c8;
height: 47px;
width: 107px;
font-family: 'Noticia Text', serif;
font-size: 16px;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
and HTML:
<form name="subscription" method="post">
<input name="email" id="email" type="text" placeholder="Enter your email address"><input name="subscribe" id="subscribe" value="Notify me" type="submit">
</form>
http://jsfiddle.net/SV3VS/
Does this help?
http://jsfiddle.net/panchroma/ERhLP/
I could see the blip on Safari as well so I tried explicitly setting the height of the input box and the submit button and changed them to an even number.
input#email{
height:48px;
}
#subscribe {
....
height: 48px;
....
}
Good luck!
After forking a CodePen, I redesigned part of it, and it renders perfectly at the CodePen, but after running it through CodeKit, it looks weird, see the border in the middle of the two fields?
Compiled CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
background: #E2E2E2;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif; }
.login-form-wrap {
background: #8fc400;
border: 1px solid #8fc400;
box-shadow: 0 1px #8fc400 inset, 0 0 10px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
position: relative;
width: 360px;
height: 380px;
margin: 60px auto;
padding: 50px 30px 0 30px;
text-align: center; }
.login-form-wrap:before {
background: url(http://cs6265.userapi.com/u155567463/docs/ad0e8d87e888/OSX-Buttons.png);
display: block;
content: '';
width: 58px;
height: 19px;
top: 10px;
left: 10px;
position: absolute; }
.login-form-wrap > h1 {
margin: 0 0 50px 0;
padding: 0;
font-size: 26px;
color: #fff; }
.login-form-wrap > h5 {
margin-top: 40px; }
.login-form-wrap > h5 > a {
font-size: 14px;
color: #fff;
text-decoration: none;
font-weight: 400; }
.login-form input[type="email"], .login-form input[type="password"] {
width: 100%;
border: 1px solid;
outline: none;
padding: 12px 20px;
color: #424647;
font-weight: 400;
font-family: "Lato", sans-serif; }
.login-form input[type="email"] {
border-radius: 4px 4px 0 0;
padding-bottom: 13px;
box-shadow: 0 -1px 0 #e0e0e0 inset, 0 1px 2px rgba(0, 0, 0, 0.23) inset; }
.login-form input[type="password"] {
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.23) inset, 0 1px 2px rgba(255, 255, 255, 0.1); }
.login-form input[type="submit"] {
font-family: "Lato", sans-serif;
font-weight: 400;
background: #e0e0e0;
background: -moz-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0e0e0), color-stop(100%, #cecece));
background: -webkit-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
background: -o-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
background: -ms-linear-gradient(top, #e0e0e0 0%, #cecece 100%);
background: linear-gradient(to bottom, #e0e0e0 0%, #cecece 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#cecece',GradientType=0 );
display: block;
margin: 20px auto 0 auto;
width: 100%;
border: none;
border-radius: 3px;
padding: 8px;
font-size: 17px;
color: #636363;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
font-weight: 700;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.17), 0 1px 0 rgba(255, 255, 255, 0.36) inset; }
Screenshot:
Add normalize.css to your project.
I am trying to have a image on CSS text button. If I increase font-size to 26 px, image appear properly.I want to keep the font-size at 20px but fit image properly.
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
background: url(../img/gmail2.png) no-repeat;
}
a.button.icon.chat span {
background-position: 0px -48;
}
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: 20px;
font-weight: bold;
}
What about setting an specific height for a.button.icon span ?