I use custom checkboxes on my website. My problem is that the Chrome and Firefox visual puts me a small white frame as illustrate by figure bellow:
QUESTION: I'm not a web expert and I need some assistance to fix this. Thanks in advance.
CSS:
input[type="checkbox"] {
position: relative;
display: inline-block;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
height: 25px;
width: 50px;
font-size: 25px;
border-radius: 1.5em;
background-color: #222;
border-color: transparent;
background-clip: padding-box;
color: white;
vertical-align: middle;
-webkit-transition: all 0.25s linear 0.25s;
transition: all 0.25s linear 0.25s;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 50%;
background-color: white;
border-radius: 100%;
border: 0.125em solid transparent;
background-clip: padding-box;
z-index: 3;
-webkit-transform-origin: right center;
transform-origin: right center;
}
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: 1;
}
input[type="checkbox"]:focus {
color: white;
border-color: transparent;
background-color: #919FAF;
outline: none;
}
td input[type="checkbox"]:checked {
color: white;
background-color: rgba(128, 201, 20,1);
border-color: transparent;
}
HTML:
<input type="checkbox" onchange="check_prop()"/>
This fixes it for Chrome. I have not tried it for firefox. Changed the z-index to -1.
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: -1;
}
Related
I'm attempting to make a button that has an ::after content of transparent background and white border. Button is supposed to fall into that content without ::after changing any position.
I'm having some trouble figuring it out.
Here's the code.
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.3s;
z-index: -1;
}
You can find exact look on this JFiddle Link: https://jsfiddle.net/d7knzb1p/6/
thank you all
You can try to have :hover for your button and button::after
button:hover::after to reset the shadowed layer to the original button
Another key change here is that we'd use translate for the better animation
body {
background-color: black;
}
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: transparent;
transform: translate(0.8rem, 0.8rem);
color: white;
}
button:hover::after {
content: "";
transform: translate(-0.8rem, -0.8rem);
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
transform: translate(0, 0);
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.2s;
z-index: -1;
}
<button>
BUY
</button>
I have implemented a :hover animation for a link that takes you to another part of the website. When hovered in Firefox or Google Chrome, the width of the border of the :before and :after pseudo-elements are 2px like specified but when checking Safari, I found the width to be thicker than what is expected.
The HTML, CSS and screenshots of the occurrence are below.
Firefox and Chrome:
Safari:
Code:
a {
text-decoration: none;
color: inherit;
}
#title {
color: black;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gallery-link {
padding: 15px 0;
text-align: center;
}
#gallery-link-padding {
padding: 15px 60px;
}
.frame-effect-click {
position: relative;
font-weight: 500;
font-size: 16px;
cursor: pointer;
border-radius: 10px;
transition: 0.4s;
}
.frame-effect-click:after, .frame-effect-click:before {
content: '';
position: absolute;
width: 0;
height: 0;
transition: all 0.4s linear, opacity 0.1s 0.4s;
opacity: 0;
}
.frame-effect-click:after {
bottom: 0;
right: 0;
border-bottom: 2px solid black;
border-right: 2px solid black;
}
.frame-effect-click:before {
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
}
.frame-effect-click:hover:after, .frame-effect-click:hover:before {
width: calc(100% + 10px);
height: calc(100% + 10px);
transition: 0.4s, opacity 0.1s;
opacity: 1;
}
<div id="title">
<div id="gallery-link">
<a id="gallery-link-padding" class="frame-effect-click" href="#">View gallery</a>
</div>
</div>
Does anyone know why that is and how to fix this issue?
I'm trying to create a continue button that shows a right pointing arrow in a hover state. I also want the arrow to be centered.
I've tried adding .icon-arrow-right:before {content: "&rarr";}
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "#";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I would like the arrow to be to the right of the button text in a hover state. I would also like the arrow to be centered with the button text.
Make your pseudo element into the triangle you desire:
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
This uses the awesome transparent border trick to make the element box appear as a triangle. Change the border widths to alter the size of the triangle, notice the border with color is twice as wide as the transparent sides. You can play with these values to nuance the triangle how you like.
I also changed how you are positioning the text in the button:
.btn {
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
border: 3px solid #fff;
}
By using line-height this way you can guarantee your text will be vertically centered in the button at any font-size.
Check out the full working example:
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I have vertically centered the arrow with top:50%;transform:translateY(-50%);. I removed the line-height and height CSS from the .btn pseudo element because they weren't needed. I have just used > for the arrow, but you can use something like fontawesome to get a nice icon.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
font-size: 125%;
color: #fff;
transition: all 0.3s;
left: 130%;
top:50%;
transform:translateY(-50%);
}
.icon-arrow-right:before {
content: ">";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
Just expanding on #BugsArePeopleToo 's answer, using borders ans transforms to keep the ">" shape the OP wanted.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "";
width: 0.5em;
height: 0.5em;
position:absolute;
top:50%;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
I'm not new to CSS but for some reason I've not played with animations or transitions up to this point. I want to learn how to apply any form of transition to a tooltip that I've made, but every time I read code and then try I seem to fail. I have a quick example of code I put together and maybe someone can quickly show me what I'm doing wrong.
Note: This is only an example, I don't plan to use a 2 second transition, makes it clear that it's working.
Following is the key code, please see the jsfiddle here.
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:hover:after {
transition: all 2s ease-in-out;
.borderRadius(3px);
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
}
&:after {
display: none;
}
&:hover:after {
display: block;
}
}
Try this solution
you should assign all the styles to the after
and to the hover status just the attribute you want to animate
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:after {
transition: all ease 5s;
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
}
.formRow {
background: #EFEFEF;
margin: 50px auto;
padding: 10px;
width: 50%;
}
.formRow-label {
display: inline-block;
margin-right: 20px;
}
.formRow-input {
display: inline-block;
}