I have this code:
#mixin fade-transition($element) {
-webkit-transition: $element 0.15s ease-in-out;
-moz-transition: $element 0.15s ease-in-out;
-ms-transition: $element 0.15s ease-in-out;
-o-transition: $element 0.15s ease-in-out;
transition: $element 0.15s ease-in-out;
}
body {
background: grey;
font-family: "Arial";
background-size: cover;
}
a {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
color: #FAFAFA;
border: 3px solid #FAFAFA;
padding: 25px;
position: absolute;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
#include fade-transition(background);
&:hover {
background: rgba(8,97,76,0.6);
}
}
It's just the part of the code, when I hover the button nothing happens. I know that the :&hover line is not recognized but why is that? I wasn't able to see what's wrong
Thank you for your time.
Related
Good afternoon.
I'm having a problem changing the background color of the checkboxes that are selected.
CheckBox to change
I've seen options on the internet and some questions right here in the stack. But none of them were successful. Below is the DOM image where the elements are inserted.
Dom about element
The last code I tested was this and it still didn't work
input[type=checkbox]:checked:after{
background-color: red !important;
color: blue !important;
}
Aimed to have a background in this color # FFEA00 when checked and the arrow to be # 000 when checked.
Best regards and thanks for the help
Yellow background when checked, black arrow when checked. It's here:
.checkbox-label {
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom {
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>
Hi can i know how can use 2 pseudo element for 1 class or 2 class. I tried both ways was still being overridden. Your help and advice much appreciated.
I tried 2 ways. First as below
<div class="custom_class">
<p>Custome Text</p>
</div>
.custom_class::before
{
}
.custom_class::after
{
}
.custom_class::before
{
}
.custom_class:::after
{
}
Second wat as below
<div class="custom_class1 custom_class2">
<p>Custome Text</p>
</div>
.custom_class1::before
{
}
.custom_class1::after
{
}
.custom_class2::before
{
}
.custom_class2:::after
{
}
But both not working. Can please advice on this
-------Edited------------------
This is my html code
<div class="classOne transx transy">
<div class="flex-row">
Custome Text
</div>
</div>
Added my code css code
.classOne {
position: absolute;
left: 50%;
width: 20%;
height: 55px;
border-radius: 0px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
outline: 3px solid gold;
overflow: hidden;
background: #ffbb00;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
margin-left:30.6%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
a.classOneBtn
{
color: white;
font-family: 'Chivo Black', sans-serif;
font-size: 18px;
font-weight: 500;
}
.transy::before
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transy::after
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
right: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
}
.transx::before
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx::after
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0px;
bottom: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx:hover::before, .transx:hover::after
{
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.transy:hover::before, .transy:hover::after
{
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
This was for the animation part whereby when hover will show a line of box This the code which i was performing.
If you would like see output. you need comment the transx
In the same element you can not.
It is not the same item but you can get something similar.
.transx{
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.classOne {
text-align: center;
position: absolute;
left: 50%;
width: 20%;
height: 55px;
border-radius: 0px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
outline: 3px solid gold;
overflow: hidden;
background: #ffbb00;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
margin-left:30.6%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
a.classOneBtn
{
color: white;
font-family: 'Chivo Black', sans-serif;
font-size: 18px;
font-weight: 500;
}
.transy::before
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transy::after
{
height: 100%;
width: 5px;
background: white;
content: "";
position: absolute;
right: 0;
top: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
}
.transx::before
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0;
top: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx::after
{
height: 5px;
width: 100%;
background: white;
content: "";
position: absolute;
left: 0px;
bottom: 0;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.transx:hover::before, .transx:hover::after
{
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.transy:hover::before, .transy:hover::after
{
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<div class="classOne transy">
<div class="transx"></div>
<div class="flex-row">
Custome Text
</div>
</div>
You can only have one ::before and one ::after pseudo-element per element, but with some CSS magic you can make it look like the pseudo-elements of a child element belongs to its parent:
*::before,
*::after {
display: block;
}
.custom_class1::before {
content: "outer before"
}
.custom_class1::after {
content: "outer after"
}
.custom_class1 p::before {
content: "inner before";
position: absolute;
top: -18px;
}
.custom_class1 p::after {
content: "inner after";
position: absolute;
bottom: -18px;
}
.custom_class1 p {
position: relative;
background-color: lightblue;
}
.custom_class1 {
background-color: pink;
display: inline-block;
}
<div class="custom_class1 custom_class2">
<p>Custome Text</p>
</div>
You can achieve what you want without any pseudo element:
.box {
display:inline-block;
border:1px solid #000;
padding:4px;
background:
linear-gradient(#fff,#fff) left,
linear-gradient(#fff,#fff) bottom,
linear-gradient(#fff,#fff) right,
linear-gradient(#fff,#fff) top;
background-repeat:no-repeat;
background-origin:content-box;
background-size:5px 0%,0% 5px;
background-color:orange;
transition:0.5s;
}
.box:hover {
background-size:5px 100%,100% 5px;
}
.box a {
display:inline-block;
padding:20px 50px;
}
<div class="box">
text
</div>
I would like to add to add this css example to my button on my website
https://codemyui.com/ghost-button-glint-effect-3d-button/
I already tried pasting the css code in the wordpress customizer add css input...
I adjusted the class to my button....
.btn--primary
but it doesn't work
hope anybody can help me.
Thanks in advance!
#-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
#keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="wrapper">
Shiney!
</div>
I managed to get this integrated in my WordPress installation. Try using the !important tag incase there are some predefined classes in your template.
Despite using normalize.css when I try to make this navigation icon, originally from Jesse Couch, thinner, then after the transition the span tags seems to get a second effect applied to them, making them a tiny tad more thinner. Why is this happening? Sorry I cannot really word this better but please see for yourself. Firefox version 28 up to 50 shows this effect, Chrome latest version however does not and not tested this in Opera or IE11/Edge.
* {
margin: 0;
padding: 0;
}
/* normalize.css included */
#nav-icon {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
/* When I change the default value of 9px to something lower there is a strange "thinning" effect visible on the span tag after about half a second, why?*/
#nav-icon span {
display: block;
position: absolute;
height: 5px; /* 9px is the default value, lowering this has a strange after effect on the span tags, why? */
width: 100%;
background: #d3531a;
border-radius: 5px; /* 9px is the default value, lowering this has a strange after effect on the span tags, why? */
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 18px;
}
#nav-icon span:nth-child(4) {
top: 36px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
I am trying to rotate an arrow in a css button but I can't proceed without rotating the whole button...
The point is to make a download button from an upload button. How can I rotate only the arrow?
The button:
body {
background: #2d3e4f;
}
.cntr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.upload {
display: block;
width: 40px;
height: 50px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #e64d43;
cursor: pointer;
}
.upload:after {
content: '';
position: absolute;
display: block;
top: 0px;
right: 0px;
width: 0px;
height: 0px;
-webkit-border-radius: 0px 2px 0px 2px;
border-radius: 0px 2px 0px 2px;
background: -webkit-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -moz-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -o-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: -ms-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
background: linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.upload i {
width: 2px;
height: 14px;
background: #fff;
display: block;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.upload i:before,
.upload i:after {
content: '';
position: absolute;
display: block;
width: 2px;
height: 8px;
background: #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.upload i:before {
-webkit-transform: rotate(45deg) translateX(-3px);
-moz-transform: rotate(45deg) translateX(-3px);
-o-transform: rotate(45deg) translateX(-3px);
-ms-transform: rotate(45deg) translateX(-3px);
transform: rotate(45deg) translateX(-3px);
}
.upload i:after {
-webkit-transform: rotate(-45deg) translateX(3px);
-moz-transform: rotate(-45deg) translateX(3px);
-o-transform: rotate(-45deg) translateX(3px);
-ms-transform: rotate(-45deg) translateX(3px);
transform: rotate(-45deg) translateX(3px);
}
.upload:hover i {
height: 18px;
}
.upload:hover:after {
width: 12px;
height: 12px;
}
There are several more efficient ways to do this.
a) Skip all that and use a tool to create an alternate button image with original image rotated 180 degrees.
b) Use one of the NUMEROUS Unicode characters for it instead. See this wikipedia page: http://en.wikipedia.org/wiki/Arrow_(symbol)