My button looks like this (atachement) and my CSS Code for the Button looks like that and it is double colored. How can I change it that it is just light green:
.button {
font-size: 1rem;
font-weight: bold;
padding: 1em 2em;
cursor: pointer;
background: transparent;
color: white;
border-color: hsl(126, 100%, 30%);
border-radius: 1.5em/50%;
}
Image
You can set your border's "style" to solid, right now it is set to inset. Add border-style: solid to your CSS:
.button {
font-size: 1rem;
font-weight: bold;
padding: 1em 2em;
cursor: pointer;
background: transparent;
color: white;
border-color: hsl(126, 100%, 30%);
border-radius: 1.5em/50%;
border-style: solid;
}
If you want to revert the changes either remove border-style: solid; or use border-style: inset;
More on border-style
the border-style has to be defined which is defined as solid in the below code, if it is not defined it will have to use inset border-style as the border-style which is the default
.button {
font-size: 1rem;
font-weight: bold;
padding: 1em 2em;
cursor: pointer;
background: transparent;
color: white;
border: solid 1px hsl(126, 100%, 30%);
border-radius: 1.5em/50%;
}
Related
Edge creates the perfect inset border, but the outset border is wrong.
Pictures here:https://imgur.com/a/pKavy1K
The only change in code between these two pictures is changing the border-style from outset to inset. Why are the colors not exactly the same but swapped?
.SmallButton {
color: grey;
font-family: "Segoe UI";
font-weight: bold;
background-color: white;
font-size: 15px;
border-radius: 30px;
border-style: inset;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
margin-top: 20px !important;
width: 230px !important;
height: 36px !important;
}
<input class="SmallButton" type="submit" value="Sign Up">
Browsers sometimes have slightly different approaches on how to display certain UI elements. It's best to style them manually by applying specific CSS properties.
You can change the border-style to solid and apply border-color for each side to get the preferred result.
.button {
background-color: #FFFFFF;
border-radius: 18px;
border-style: solid;
border-width: 2px;
color: #808080;
cursor: pointer;
font-size: 15px;
font-weight: bold;
height: 36px;
max-width: 230px;
width: 100%;
}
.button-outset {
border-color: #F0F0F0 #A0A0A0 #A0A0A0 #F0F0F0;
}
.button-inset {
border-color: #A0A0A0 #F0F0F0 #F0F0F0 #A0A0A0;
}
<input type="submit" class="button button-outset" value="Outset button">
<br><br>
<input type="submit" class="button button-inset" value="Inset button">
I had a email textbox with default,success,error css class.
<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/>
.default{
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error{
width: 306px;
box-sizing: border-box;
border: 2px solid #ff0000;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.success{
width: 306px;
box-sizing: border-box;
border: 2px solid #00b33c;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
here i'm applying following css classes default ,error and success while validating email text box but only difference from the above three classes is border property only .how to reduce the redundant css properties is there any better way to achieve this.
You can define similar css at one place with joining multiple selectors and overriding later if necessary:
Note: The styles that you are overriding i.e for .error and .success must come after the generic styles otherwise they will be overridden by default styles and you won't see any change.
.default,
.error,
.success {
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error {
border-color: #ff0000;
}
.success {
border-color: #00b33c;
}
I am trying to make to simple buttons. Easy. However they will not for some reason round off the corners of the outline. This is what i have for my HTML and CSS
<a class="login-worker" href="">LOG IN AS A WORKER</a>
<a class="login-user" href="">LOG IN AS A USER</a>
.login-worker,
.login-user {
font-size: 22px;
font-weight: 600;
outline: 3px solid #000000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
Use border: solid 2px #000; not outline.
Example here
.login-worker,
.login-user {
display: block;
font-size: 22px;
font-weight: 600;
border: solid 2px #000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
The cause seems to be outline: 3px solid #000000;
Change to:
border: 3px solid #000000;
border-radius: 5px;
After all, your question states Why won't my **border** round off it's corners?
But if it's outline you need then please see Outline radius? (user289112 provided link but removed his answer)
As you can see from the picture above, my email button border displays both a greyish and white color when the border-color is set to display a white border. I have posted the code below:
.email {
margin: 18px 0 0 0;
margin-bottom: 12px;
}
.email .emailText {
border-radius: 35px;
-ms-border-radius: 35px;
-moz-border-radius: 35px;
-o-border-radius: 35px;
-webkit-border-radius: 35px;
background-clip: padding-box;
outline: none;
-ms-outline: none;
-moz-outline: none;
-o-outline: none;
-webkit-outline: none;
background: rgba(0, 113, 188, 0.4);
border-color: white;
color: white;
font-size: 1.6em;
font-weight: 300;
height: 58px;
padding: 0 0 0 30px;
width: 61.7021276596%;
/* 580px/940px */
}
.email :-ms-input-placeholder {
color: white;
}
.email ::-mox-placehold {
color: white;
}
.email ::-webkit-input-placeholder {
color: white;
}
<div class="email">
<form action="#" class="emailBox" target="_blank" method="post">
<input type="email" class="emailText" placeholder="enter email for early access" size="">
</form>
</div>
You're running up against the browser's default implementation of borders for input elements.
By default, most browsers will shade the top border darker than the top, so that the input field looks inset into the page, Specifying the foreground color, as border-color does, doesn't override the border-style: inset default. Override that by specifying a solid border, so that the color is uniform:
border-color: white;
border-style: solid;
or less verbosely:
border: solid white;
I have some CSS that works well in Chrome, FireFox, and IE, but looks very strange in Opera.
Link to the fiddle
Also, I took screenshots:
This what happens on just forgot link hover:
This happens on form focus (complete disaster):
Normal look in Chrome:
Submit button on focus loses it's border color (why in hell?!)
Some mess on focus, I can't explain, just take a look on second pic
I tested on the latest version of Opera. What the hell is wrong with this browser? Even IE8 shows everything as I expect it.
CSS:
.sign_in {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -255px;
background: #ffffff;
width: 510px ;
height: 240px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
.signs_form{
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
margin-top: 40px;
vertical-align: 100%;
margin-left: 50px;
padding-right: 50px;
font-weight: 500;
display: inline-block;
}
input#email{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#email:focus{
border-color: rgba(2, 22, 222, 0.97);
}
input#password{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#password:focus{
border-color: rgba(2, 22, 222, 0.97);
}
.sign_in_submit {
margin-top: 0;
border: solid 1px #378de5;;
background-color: #ffffff;
color: #378de5;
padding: 2px 5px 2px 5px ;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: 500;
}
.sign_in_submit:hover {
cursor: pointer;
border-color: rgba(2, 22, 222, 0.97);
color: rgba(2, 22, 222, 0.97);
}
#close {
float: right;
padding-left:-10px;
padding-top: -10px;
margin-right: 5px;
}
#close_sign_in_popup {
text-decoration: none;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 20px;
color: #d61354;
}
#close_sign_in_popup:hover {
color: #fc145f;
}
.forgot_pass{
display: block;
margin-top: 5px;
margin-bottom: 0;
margin-left: 2px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
color: #378de5;
font-size: 13px;
font-weight: 400;
text-decoration: none;
}
.forgot_pass:hover{
height: 100%;
text-decoration: underline;
}
Forked http://jsfiddle.net/w29WQ/1/
.sign_in {
/*top: 50%; // so it seems the positioning gets all funky in opera
left: 50%;*/
margin-top: 0;
margin-left: 0;
/* Your other styles for this element */
}
Anyhow, seems your fixed positioning was causing errors, I simply commented out the top and left positioning in the containing div, and reset the margins to keep the element displayed.
Ok, guys.
1) Shifts in form
The reason is that Opera strongly dislikes inline-block as form property, which is quite logical, actually, but all other browser undertand this and it is convinient
2) Loosing border-color of submit button on field focus
But here - Opera bug, can be fixed by placing before real tag invisible copy - so it is like bait to this Opera bug.