I was messing around in HTML when I saw this small bug
I made this button using SCSS and gave it a border radius of 5px. If you're able to notice, there's a small curve where the border raidus is supposed to be.
Close up:
Why is this happening?
Code
/* Button.scss file */
#import "../../util/variables";
button {
background-color: white;
color: black;
outline: none;
border: 1px currentColor solid;
padding: 0.3rem 0.85rem;
border-radius: $border-radius;
&:hover {
cursor: pointer;
}
&.primary {
background-color: $primary;
color: $primary-text;
}
&.secondary {
background-color: $secondary;
color: $secondary-text;
}
&.block {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
}
<!-- HTML -->
<button
class="button"
>
Login
</button>
EDIT:
$primary is #283593
I use firefox
button {
background-color: white;
color: black;
outline: none;
border: 1px currentColor solid;
padding: 0.3rem 0.85rem;
border-radius: 5px;
}
button:hover {
cursor: pointer;
}
button.primary {
background-color: #283593;
color: white;
}
button.block {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
<button class="button primary">Login</button>
This is an artifact caused by the imprecision of fractional numbers used in the rendering. You can expect it to vary depending on browser, and perhaps even GPU and rendering mode.
See also: Is floating point math broken?
Related
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
I'm trying to remove the yellow outline with outline: none but it's not working. I tried to put the property on every action, but with no success. Any ideas on why is not working?
.save {
background-color: #99aab5;
color: black;
text-align: center;
font-family: 'Comic Neue', cursive;
font-size: 24px;
width: 125px;
border: 1px solid #ffffff;
border-radius: 4px;
cursor: pointer;
transition: .3s;
box-shadow: 1px 4px 2px #fff;
position: absolute;
bottom: 13rem;
right: 2.7rem;
outline: none;
}
.save:hover {
color: azure;
}
.save:active {
transform: translateY(4px);
box-shadow: 0px 2px 1px;
outline: none;
}
<button type="button" class="save">Save</button>
It might not be an outline. In my experience, it can be a border or even a box shadow.
Try using this:
button{
border: none;
outline: none;
box-shadow: none;
}
if this does not work then you have to check the Chrome dev console in the element tab to see which style is causing the yellow outline.
I've been trying to hack the font awesome icon to be all the blue with the icon white but this is the closest I've been. Know what I need to add/remove? Tried transparent borders, remove padding/margins, positioned absoluted a span behind with no luck.
.b-social-media-shares__a {
width: 48px;
height: 48px;
border-radius: 50%;
text-align: center;
margin: 0 6px;
&:hover {
box-shadow: 1px 3px 5px grey;
}
i {
color: white;
line-height: 48px;
font-size: 25px;
}
}
.b-social-media-shares--facebook {
background-color: #4267B2;
}
.b-social-media-shares--facebook .fa-facebook-f {
color: #4267B2;
line-height: 48px;
font-size: 28px;
}
.b-social-media-shares--facebook .fa-facebook-f:before {
content: "\f09a";
background-color: white;
border-radius: 50%;
}
.b-social-media-shares--facebook:hover {
background-color: white;
}
.b-social-media-shares--facebook:hover i {
color: #4267B2;
}
<a id="facebook" href="" class="b-social-media-shares__a b-social-media-shares--facebook dnt" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
Some unnecessary and some conflicting styles. See comments in the code:
.b-social-media-shares__a {
display: inline-flex; // added
align-items: center; // added
justify-content: center; // added
text-decoration: none; // added, but not required (removes the underline)
width: 48px;
height: 48px;
border-radius: 50%;
// text-align: center; // not required because of `justify-content`
margin: 0 6px;
&:hover {
box-shadow: 1px 3px 5px grey;
}
i {
color: white;
// line-height: 48px; // not really required
font-size: 25px;
}
}
.b-social-media-shares--facebook {
background-color: #4267b2;
}
.b-social-media-shares--facebook .fa-facebook-f {
// color: #4267b2; // not required (it should be white)
// line-height: 48px; // not really required
font-size: 28px;
}
// This whole ruleset is not required
// .b-social-media-shares--facebook .fa-facebook-f:before {
// content: "\f09a";
// background-color: white;
// border-radius: 50%;
// }
.b-social-media-shares--facebook:hover {
background-color: white;
}
.b-social-media-shares--facebook:hover i {
color: #4267b2;
}
Maybe as an alternate solution you could place just the "f" in a blue circle
I made this snippet, I hope it helps:
https://codesandbox.io/s/icy-dust-2vfvi?file=/src/index.js:69-132
There is no border... You're putting a circle icon inside a circular element that's larger than the icon. The wrapper element has a white background and a blue border. This background is showing behind your icon.
Change
.b-social-media-shares--facebook .fa-facebook-f:before {
background-color: white;
}
to have a blue background...
I just leanred CSS and try to doing some tutorials.
I have a button with this CSS
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
I just want button just change the color, and remove the border while i hover it.
But the result is just like this:
image of the result
I've googled it, but got stuck because the result i got just another tutorial how to make my button move, not to make it doesn't move.
Sorry for my bad english. Thanks in advance!
Edit: After i try to make another button, this is because of border: none; that makes my button move slightly. Is it any other way to make border away but the button doesn't move?
this is happening because you are removing the border. Instead of removing it, make it the same color as the background.
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
Or, if you want the border to really disappear, use transparent:
.button:hover {
background: red;
border-color: transparent;
}
see below code, on .btn:hover you can write your css
.btn:hover {
background-color: red;
color: #fff;
}
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
display: inline-block;
background-color: #fff;
border: 1px solid red;
}
.btn:hover {
background-color: red;
color: #fff;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
<div class="btn">one</div>
<div class="btn">two</div>
I've been looking to build a range slider which changes the background color of the filled portion based on the current progress value. For example, be greener if closer to 0, yellow in the middle and gets more red towards the maximum value.
This is the current CSS for my slider:
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
width: 80px;
-webkit-appearance: none;
background-color: white;
border: 1px #e1e4e8 solid;
outline-width: 0;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: red;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 4px;
-webkit-appearance: none;
height: 10px;
background: #24292e;
box-shadow: -80px 0 0 80px red;
}
}
/* FF */
input[type="range"]::-moz-range-progress {
background-color: red;
}
input[type="range"]::-moz-range-track {
background-color: white;
}
/* IE */
input[type="range"]::-ms-fill-lower {
background-color: red;
}
input[type="range"]::-ms-fill-upper {
background-color: white;
}
I'm not sure if this can be done with just CSS, but I'd prefer to not use JS at all. I believe that with some browser-specific elements it may be possible?
Thanks