This code works in Chrome, the cursor appears as a pointer and registering the click event as it should, but not in Firefox. Can you tell my why?
#import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');
button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
background: none !important;
text-indent: initial;
-webkit-font-smoothing: antialiased;
vertical-align: top;
font-size: 0;
width: 0;
height: 0;
border: none;
}
button.slick-arrow:before {
display: block;
position: absolute;
font: normal 32px/1 'dashicons';
padding: 8px;
opacity: 0.6;
color: #000;
cursor: pointer;
}
button.slick-arrow:hover:before {
opacity: 1;
}
button.slick-prev:before {
content: "\f341";
left: 8px;
}
button.slick-next:before {
content: "\f345";
right: 8px;
}
<button class="slick-prev slick-arrow">Click me!</button>
The issue lays within the positioning of your before element. Since it is positioned absolutely, and the button itself has it's width and height set to 0, the element size is zero, and you cannot interact with it.
To fix this, remove width: 0; and height: 0; from the button, and remove the position: absolute; from the :before-pseudo.
Additionally, add cursor: pointer; to your button.
#import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');
button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
background: none !important;
text-indent: initial;
-webkit-font-smoothing: antialiased;
vertical-align: top;
font-size: 0;
border: none;
cursor: pointer;
}
button.slick-arrow:before {
display: block;
font: normal 32px/1 'dashicons';
padding: 8px;
opacity: 0.6;
color: #000;
}
button.slick-arrow:hover:before {
opacity: 1;
}
button.slick-prev:before {
content: "\f341";
left: 8px;
}
button.slick-next:before {
content: "\f345";
right: 8px;
}
<button class="slick-arrow slick-prev">Click me!</button>
Related
I am trying to implement the CSS entity code in content in react SCSS file I am getting the background colour green with black border and not able to set the background colour as black.
here is my code
input[type=checkbox] {
width: 29px;
height: 25px;
margin-right: -18px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
margin-top: -1.5px;
}
input[type=checkbox]:checked{
margin-top: -6px;
}
input[type=checkbox]:after,
input[type=checkbox]::after {
content: " ";
display: inline-block;
margin-left: 2px;
padding-bottom: 5px;
width: 12px;
height: 12px;
visibility: visible;
border: none;
padding-left: 3px;
border-radius: 4px;
}
input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
content: "\2714";
padding: -5px;
font-weight: bold;
font-size: 7px;
padding: 1px;
}
Using your CSS, and simplified it a little, here are the results.
The green and black styles must coming from another CSS source, as my example using your CSS does not show this?
input[type=checkbox] {
transform: scale(1000%) translate(50%, 50%);
}
input[type=checkbox] {
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: #775273;
display: inline-block;
color: #775273;
width: 12px;
height: 12px;
visibility: visible;
border: none;
border-radius: 4px;
position: relative;
padding: 2px;
text-align: center;
}
input[type=checkbox]:checked:after {
content: "\2714";
background-color: #ffba03;
line-height: 1;
}
<input type="checkbox" />
So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.
Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.
My problem is I want plus + symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.
This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.
Here's the code.
<div id="info-additions" class="product__accordion accordion info-additions-content" >
<details>
<summary>
<div class="summary__title info-additions-tab g-flex">
<h2 class="h4 accordion__title t-body benefits">
Tab One
<span></span>
</h2>
</div>
<div class="summary__title info-additions-tab g-flex">
<modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
<button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients">
<h2 class="h4 accordion__title">
Tab Two
<span></span>
</h2>
</button>
</modal-opener>
</div>
</summary>
<div class="accordion__content rte">
<p>Content</p>
</div>
</details>
</div>
CSS:
body {
font-size: 1.6rem;
}
*, ::before, ::after {
box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
letter-spacing: .06rem;
line-height: 1.3;
}
.h4, h4 {
font-size: 1.6rem;
}
.grid {
list-style: none;
}
.g-flex {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.accordion summary {
cursor: pointer;
display: flex;
position: relative;
list-style: none;
line-height: 1;
padding: 1.5rem 0;
}
.accordion__title {
display: inline-block;
max-width: calc(100% - 6rem);
min-height: 1.6rem;
margin: 0;
word-break: break-word;
}
details > * {
box-sizing: border-box;
}
.accordion__title {
word-break: break-word;
}
.accordion .summary__title {
display: flex;
flex: 1;
}
#info-additions {
clear: both;
height: auto;
margin: 15px 0 0;
border-top: 2px solid;
border-bottom: 2px solid;
width: 100%;
}
.info-additions-content {
position: relative;
height: 0;
transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
justify-content: space-between;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab button {
position: relative;
padding: 16px 0!important;
line-height: 1;
font-weight: 500;
text-align: left;
}
.info-additions-tab button.benefits {
width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
width: 100% !important;
}
.info-additions-tab button.ingredients {
width: 100%;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab span:before,
.info-additions-tab span:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 18px;
background-color: black;
transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
position: relative;
height: 0;
transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: 5px 0 20px;
opacity: 0;
pointer-events: none;
transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
opacity: 1;
pointer-events: auto;
transition-delay: 0.4s;
}
#info-additions button {
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: 0.2s;
}
if you want an absolute element like + to stay in the parent element you have to set the position of the parent to "relative".
you have two problems. summary__title doesn't have a position so + doesn't stay in it .
for the second tab, your modal button has a relative position that makes the + stay inside of it instead of the summary__title.
.accordion .summary__title {
...
position: relative; // add position
}
#info-additions button {
...
position: unset; // unset the position of the button
}
Below CSS is working perfect in Chrome but not in edge I tried ::after it doesn't make any difference.
I also tried position: visible and hidden, but no luck.
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
position: relative;
overflow: visible;
padding: 9px;
top: 4px;
border: 2px solid $border-contrast-dark;
border-radius: 50%;
left: 15px;
cursor: pointer;
z-index: 10;
}
input[type=checkbox]:checked+label {
background-color: $action-success-color;
color: $text-contrast-light;
border: 2px solid $border-contrast-light;
}
// its not taking below properties
input[type=checkbox]:checked+label:after {
position: absolute;
overflow: hidden;
left: 3px;
top: 0px;
color: white; // its not taking this property
content: '\2714';
#include font-size(14px);
}
// its not taking below properties
CSS does not support commening with // like JS does.
So remove comments like this (or replace them with /* comment */ if needed)
its not taking this property
That's because Edge renders your \2714 as emoji symbol (because it can).
You have to apply a trick to fix it. See the snippet below:
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
position: relative;
overflow: visible;
padding: 9px;
top: 4px;
border: 2px solid $border-contrast-dark;
border-radius: 55%;
left: 15px;
cursor: pointer;
z-index: 10;
}
input[type=checkbox]:checked+label {
background-color: grey;
color: white;
border: 2px solid black;
}
input[type=checkbox]:checked+label:after {
position: absolute;
overflow: hidden;
left: 3px;
top: 0px;
color: white;
font-family: "Segoe UI Symbol"; /* for Edge */
content: '\2714\fe0e'; /* \fe0e for Safari and others */
#include font-size(14px);
}
<input id="i" type="checkbox">
<label for ="i">Label</label>
Hie!
Transition doesn't work after animation with animation-fill-mode: forwards;
First animation fires and ends on hover, but then after unhovering transition doesn't apply.
Codepen here
It reproduces in chrome and safari. In firefox works fine.
pug:
button Button
scss:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 100%;
right: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
animation: nav-link-hover .25s forwards;
}
}
}
#keyframes nav-link-hover {
0% {
left: 0;
right: 100%;
}
100% {
left: 0;
right: 0;
}
}
UPDATE
I've found workaround but will wait for any answer and gladly accept it if it will be better or for example successfully uses broken keyframes.
Still don't know what's wrong with keyframes in chrome/safari, but have found simple workaround.
Now first 'before'-element is on right with no width right: 0; width: 0;.On hover it moves to left with 100% width, that begins to transitionally grow: left: 0; right: auto; width: 100%;.
Finally, when hover was lost, 'before' starts to decreasing, resting on the right end again.
New code:
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
Codepen
Animating elements require a defined state before the animation begins. If you define a state on a trigger (ie. hover), some unexpected behaviour may occur. Therefore, you should set your starting point before the hover.
In this case, simply move left: 0; from the hover to the "non-hover" properties of &:before
button {
padding: 5px 0;
position: relative;
border: none;
border-radius: 0;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
width: 0;
height: 4px;
border-radius: 2px;
background: blue;
transition: all .25s;
}
&:hover {
&:before {
right: auto;
width: 100%;
}
}
}
<style>
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<button class="button">Home</button>
How to put link in button?
i tried everything codes available in google but still error in my website
i dont know whats the best code for this
thanks for someone who wants to teach me.
No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
I'll suggest to add anchor tag if you want to add link.
Home
Add link in "#". It'll work.
Four different possibilities to a button become a link (CSS isn't an option):
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
width: 120px;
text-align: center;
overflow: hidden;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
}
Javascript:<br>
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br>
Inner link:<br>
<button class="button">click</button><br><br>
Wrapper link:<br>
<button class="button">click</button><br><br>
Fake button:<br>
<a href="http://example.com" class=button>click</a>
Please try this:
<button class="button">Home</button>
I think its the easy way to do it.
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
a{
text-decoration:none;
}
<button class="button">Home</button>
You can have the link as a button this way
home
Or if you using a css library like bootstrap
home