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...
Related
This question already has answers here:
Circle with two borders
(4 answers)
Closed 3 months ago.
I have a CSS style for a button. I don’t know how to do it. I think it’s a bit too complicated and it’s not easy to make responsive adjustments. I would like to ask everyone how to write a button like this in CSS? thanks
.save_coin {
display: inline-block;
position: relative;
z-index: 3;
}
.save_coin::after {
content: "";
display: inline-block;
position: absolute;
background: #222;
border-radius: 32px;
padding: 26px 101px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 768px) {
.save_coin::after {
border-radius: 38px;
padding: 38px 102px;
}
}
.save_coin span {
display: inline-block;
font-weight: 500;
text-align: center;
background: #222;
color: #fff;
padding: 12px;
border-radius: 32px;
position: relative;
z-index: 2;
border: 1px solid #fff;
width: 192px;
}
#media (max-width: 768px) {
.save_coin span {
width: auto;
font-size: 24px;
font-weight: 700;
padding: 15px 46px;
}
}
.save_coin:hover span {
color: #222;
background-color: #fff;
}
<span>ｓａｖｅ</span>
I think you can use outline attribute, work pretty good imo.
button {
padding: 10px 30px;
border-radius: 50px;
border: 2px solid white;
background-color: black;
color: white;
outline: 2px solid black;
}
button:hover {
background-color: white;
color: black;
}
<button>save</button>
You could try the box-shadow CSS property:
button {
cursor: pointer;
outline: none;
font-size: 30px;
/* 👇 outer line */
border: 5px solid black;
/* some very large number, to get a pill effect */
border-radius: 1024px;
padding: 30px 60px 30px 60px;
background: black;
color: white;
/* 👇 inner white line */
box-shadow: inset 0 0 0 3px white;
/* custom transition */
transition: 0.3s ease;
}
/* ignore this if you just want button design */
button:hover {
background: white;
color: black;
}
<button type="button">立即儲值</button>
Long story short, I have an issue on one of my webpages footers.
It is NOT showing the social icons I have.
Funny thing, the social icons show, and work perfectly on any other page.
The CSS is the same throughout, the HTML is the same throughout.
I have used the devtools and nothing looks like it is taking precedence over anything, so here I am, at a loss.
I have attached screenshots of what should be there, and what isnt there, along with the code.
What it should look like (and does on all other pages
What it looks like now
HTML code (all the same throughout every page)
CSS code. Same throughout all the pages
Page CSS with missing icons
/* --------------------PACKAGES PAGE STYLING SECTION-------------------- */
/* ----------------------------------------------------------------- */
:root {
--main-tan-color: #CCE6F4;
--brown-btns: #FBFF12;
--header: #FF206E;
--footer: #FF206E;
--recommended: #FF206E;
--white: #fff;
--black: #000;
--grey-text: rgb(82, 82, 82);
--free-plan: #FBFF12;
--blue-color: #41EAD4;
}
/* ----- Packages Header ----- */
.packages_header {
font-size: 5em;
text-align: center;
margin-top: 10%;
text-shadow: 3px 3px 3px grey;
}
/* ----- Packages Main Section ----- */
.main-section {
padding-top: 2rem;
}
.background {
background-image: url(../images/plans-background.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
opacity: 0.5;
}
.package {
width: 80%;
margin: 1rem 0;
border: 3px solid var(--black);
border-left: none;
}
.package-badge {
position: absolute;
z-index: 3;
top: -35px;
right: 6.5rem;
font-size: 2.2rem;
color: var(--black);
background-color: var(--free-plan);
padding: 0.6rem;
border-radius: 10px;
border: 1px solid var(--black);
}
/* ----- Packages Hover Affects ----- */
.package:hover,
.package:active {
box-shadow: 3px 3px 5px grey;
border-color: var(--black);
}
.package a {
text-decoration: none;
color: inherit;
display: block;
padding: 2rem;
}
.package-subtitle {
color:var(--grey-text);
}
.package-info {
padding: 1rem;
border: 1px solid var(--black);
font-size: 1.25rem;
color:rgb(56, 56, 56);
background-color: var(--white);
}
#plus {
background-color: var(--recommended);
position: relative;
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-top: 15%;
}
#free {
background-color: var(--free-plan);
float: right;
border-right: none;
border-left: 3px solid var(--black);
text-align: right;
opacity: 0.9;
border-radius: 15px 0px 0px 15px;
margin-top: 5%;
}
#free:hover {
box-shadow: -3px 3px 5px grey;
border-color: var(--black);
/* transform: scale(1.06); */
}
.clearfix {
clear: both;
}
#premium {
background-color: var(--blue-color);
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-bottom: 15%;
margin-top: 5%;
}
.package-title {
padding-bottom: 1.25rem;
}
#premium .package-title {
color: var(--black);
}
#premium .package-subtitle {
color:var(--grey-text);
}
.footer-img {
opacity: 0.9;
}
If you want to see all the code for the entire project, I have it uploaded to my [github].(https://www.github.com/ab1820) under the "uHost" repository.
I am wondering if there is something in this CSS that is not allowing the icons to show?
I have tried the position elements, z-index, removing the footer background color, background image of the page, and I am just so lost!
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?
When I add a css doc for a form it destroys my page margin. I have already tried changing all margins and paddings to 0 but didn't help. The only way this works is by removing the entire css file. I have also tried deleting all body references in the css but the issue persisted. I have also tried to add !important to the main css of the page. I am not sure what is causing this issue in the css file. When I inspect the code in the browser it does not show that this css is being used.
body {
margin: 0px;
aside {
background: #1f8dd6; /* same color as selected state on site menu */
padding: 0.3em 1em;
border-radius: 3px;
color: #fff;
margin-bottom: 2em;
}
textarea {
width: 100%;
}
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
}
.is-center {
text-align: center;
}
.button-success {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgb(28, 184, 65); /* this is a green */
}
.button-xlarge {
font-size: 125%;
}
button {
float: right;
}
#name, #email {
width: 50%;
}
}
Your css file contains every class,element,id twice. Hence it is giving problem.
Remove all code from your css file and paste this,
body {
margin: 0px;
aside {
background: #1f8dd6;
/* same color as selected state on site menu */
padding: 0.3em 1em;
border-radius: 3px;
color: #fff;
margin-bottom: 2em;
}
textarea {
width: 100%;
}
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
}
.is-center {
text-align: center;
}
.button-success {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgb(28, 184, 65);
/* this is a green */
}
.button-xlarge {
font-size: 125%;
}
button {
float: right;
}
#name,
#email {
width: 50%;
}
I have created a html code with css which displays the image 1 below (left image). What I want to accomplish is that when you hover with your mouse over image 1, I want the image 2 (Right picture) to appear (do not mind the difference in sizes).
HTML:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
CSS:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
How can I implement this to my CSS, when you hover with your mouse over the Image 1 I want it to switch colour (image 2). The colour code for the blue is #00a0df.
URL to my website
Add color: #00a0df; to borderbox and change your text's color to color: inherit. Then on hover you can change the background-color, text color, border color and anything else you want:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
color: #00a0df; //add
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: inherit; //change
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: inherit; //change
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: #FFF;
}
FIDDLE
http://jsfiddle.net/mk7hrs49/3/
In order to get the white border you want when you hover over it.
Just add border color:
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: white; <---
}
cheers
You can use the CSS :hover pseudo-class, which changes the style when the mouse is hovering over the element. Apply the colors you want (backround and font colors) to the hover attribute which will override the default (non-hovered) style. If you put the font and background color in the .borderbox class, then all you need is to override these in a .borderbox:hover like so:
.borderbox:hover {
background-color: #00a0df;
color: white;
}
The full example follows:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
color: #00a0df;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
.borderbox:hover {
background-color: #00a0df;
color: white;
}
h3.header-3 {
font-size: 130px;
text-align: center;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
You should use the :hover Pseudoclass. If this is new to you, check out the explanations on W3Schools. Your code should look like that afterwards:
.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}
Hope this solves your problem. :-)