The slider in Firefox looked gray by default. As far as I understand, Firefox does not accept many css tags, such as input[type=range]::-webkit-slider-thumb, as an example, I tried adding moz-range-thumb tags to the existing CSS, something like I managed to do it, but still the background of the slider is white, and this is only in Firefox.
How it looks after changes:
And my css code:
input[type=range] {
-webkit-appearance: none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]:focus::-ms-fill-upper {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]:-moz-focusring {
outline: none;
}
input[type=range]:focus::-moz-range-track {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
How i can remove this white background in Firefox browser?
In addition to adding background for input[type=range].
you can set height = 0 for input[type=range].
body{
background:gray;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
height:0;
/* background:none; */
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]:focus::-ms-fill-upper {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #a1d0ff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
border-radius: 1px;
box-shadow: none;
border: 0;
}
input[type=range]:-moz-focusring {
outline: none;
}
input[type=range]:focus::-moz-range-track {
background: linear-gradient(
90deg
,#29bddd,#923ddd),#c4c4c4;
}
<input type="range">
You should just set the background for input[type=range].
Here's a simplified example:
input[type=range] {
-webkit-appearance: none;
width: 500px;
height: 20px;
background: pink;
}
/* Firefox */
input[type=range]::-moz-range-thumb {
background: blue;
}
input[type=range]::-moz-range-track {
background: purple;
}
/* Chrome */
input[type=range]::-webkit-slider-thumb {
background: blue;
margin-top: -5px;
}
input[type=range]::-webkit-slider-runnable-track {
background: purple;
height: 5px;
}
<input type="range" />
Related
I'm trying to have a round border around my radio button fade in upon hover. The issue I'm facing is the hover border is being painted on the inside of the button as well as the outside. I'd only like the border on the outside. Additionally, the fade in transition is not working. Some advice appreciated. Thank you.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
You can check this code snippet with some explanation
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
/*transition: 0.3s;*/
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 10%; /* Keeping margin only 10% */
padding: 10%; /* Increase the inner area for pushing the border out of the circle */
border-radius: 50%;
transition: 0.3s; /* Move your transition to here */
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
Transition in before
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
transition: 0.3s;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
I find it a bit hacky solution,
it might help.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
added animation and also the hover border is now outside only
input[type='radio'] {
/* add margin here of If you want */
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2); /* control thickens on border here */
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%; /* outside border*/
height: 100%; /* for outside border */
border-radius: 50%;
transition:.3s; /* for animation*/
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
Without a border radius, when hovered, the line extends and connects like the middle button so:
With a border radius:
If I try to add a border radius and match it the smaller borders:
Does anyone know how you would make the small borders follow the same curve?
.barChart__button {
position: relative;
width: 300px;
height: 60px;
color: white;
border: none;
background-color: #272A2F;
border-radius: 20px;
font-family: 'Roboto';
font-size: 28px;
font-weight: 700;
margin-bottom: 34px;
transition: 0.5s;
overflow: hidden;
}
.barChart__button::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-top: 2px solid #c3a5ff;
border-left: 2px solid #c3a5ff;
transition: 0.5s;
border-radius: 5px;
}
.barChart__button:hover:before,
.barChart__button:hover:after {
width: 100%;
height: 100%;
}
.barChart__button::after {
content: '';
position: absolute;
bottom: 5px;
right: 5px;
width: 10px;
height: 10px;
border-bottom: 2px solid #c3a5ff;
border-right: 2px solid #c3a5ff;
transition: 0.5s;
border-radius: 5px;
}
<div className='barChart__buttonContainer'>
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
<button class='barChart__button'>Other example</button>
</div>
```
Here is an idea using mask:
.barChart__button {
color: white;
border: none;
background-color: #272A2F;
font-size: 20px;
font-weight: bold;
padding: 10px 20px;
border-radius: 10px; /* your radius */
position: relative;
z-index: 0;
}
.barChart__button:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
padding: 2px; /* border thickness here */
--g: linear-gradient(#c3a5ff 0 0) no-repeat; /* the color here */
background: var(--g) 0 0, var(--g) 100% 100%;
background-size: 10px 10px; /* initial size here */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: .5s;
}
.barChart__button:hover:before {
background-size: 100% 100%;
}
body {
background-color: black;
}
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
Also like below if your background will always be a solid coloration:
.barChart__button {
border: 2px solid #0000; /* border thickness here */
/* the border color below */
--g: linear-gradient(#c3a5ff 0 0) no-repeat border-box;
background:
linear-gradient(#272A2F 0 0) padding-box,
var(--g) 0 0 /var(--s,10px 10px),
var(--g) 100% 100%/var(--s,10px 10px),
#272A2F;
border-radius: 10px; /* your radius */
transition:.5s;
color: white;
font-size: 20px;
font-weight: bold;
padding: 10px 20px;
}
.barChart__button:hover {
--s: 100% 100%;
}
body {
background-color: black;
}
<button class='barChart__button'>Remaining hours</button>
<button class='barChart__button'>Requests by user</button>
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}
My CSS style for the range slider doesn't work on Edge. How can I fix the Problem?
I searched on the web for a solution. And added some codes but still not working.
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
width: 15px !important;
height: 15px !important;
border-radius: 50% !important;
background: #33A2D9 !important;
cursor: pointer !important;;
}
input[type=range]::-ms-fill-upper {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
What it should look like (for example on Firefox):
What it look like on edge:
Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.
Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.
Since it tends to be repetitive, I wrote it in SCSS:
$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
#mixin slider-thumb {
width: $input-height;
height: $input-height;
border-radius: $input-height/2;
background-color: $thumb-bg;
appearance: none;
}
#mixin slider-track {
height: $track-height;
border-radius: $track-height/2;
background-color: $track-bg;
appearance: none;
}
.slider[type=range] {
-webkit-transition: .2s;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: $input-height;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
&:hover, &:focus, &:active {
opacity: 1;
}
&::-webkit-slider- {
&runnable-track {
-webkit-appearance: none;
#include slider-track;
}
&thumb {
-webkit-appearance: none;
#include slider-thumb;
margin-top: -($input-height - $track-height)/2;
}
}
&::-moz-range- {
&track {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
&::-ms- {
&track {
#include slider-track;
}
&fill-upper {
#include slider-track;
}
&fill-lower {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
}
Resulting in the following CSS:
.slider[type=range] {
-webkit-appearance: none;
-webkit-transition: .2s;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
opacity: 1;
}
.slider[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-webkit-slider-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
}
.slider[type=range]::-moz-range-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
.slider[type=range]::-ms-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-upper {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-lower {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
<input type=range class=slider>
Playground here.
I've been searching the Internet for a while and found nothing, so I'm turning to you guys.
I was wondering how you can do a button like this with CSS (On/Off button example):
I already tried something like this :
HTML :
<a class="button_tooltip" href="#">On</a>
<a class="button_tooltip" href="#">Off</a>
CSS:
a {
color: #76daff;
display: inline-block;
padding: 8px 16px;
position: relative;
text-decoration: none;
}
a {
color: #76daff;
}
a.button_tooltip {
background: #ccc none repeat scroll 0 0;
color: black;
}
a.button_tooltip::after {
border-top-color: #cccccc;
}
a.button_tooltip::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ccc;
content: "";
margin-left: -8px;
}
a.button_tooltip {
background: #cccccc none repeat scroll 0 0;
color: #000000;
}
a.button_tooltip::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ccc;
content: "";
}
a.button_tooltip::after {
border-top-color: #cccccc;
}
But only gave me the square without the little triangle underneath.
This is easily possible with 2 elements and using a pseudo element to get the arrow bit underneath to show.
It doesn't take a great deal of HTML/CSS to complete and can easily be changed to work as an input or as an <a> tag. Whatever your requirements are.
$(document).ready(function() {
$('.btn').click(function() {
$('.btn').toggleClass('active');
});
});
.container {
width: 200px;
height: 100px;
}
.btn {
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid blue;
float: left;
cursor: pointer;
}
.active {
background: blue;
position: relative;
}
.active:before {
content: '';
position: absolute;
width: 50px;
height: 50px;
transform: rotate(45deg);
bottom: -10px;
left: 25px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btn"></div>
<div class="btn active"></div>
</div>
$(document).ready(function() {
$('.toggle-btn button').click(function() {
$(this).parent('.toggle-btn').children('button').removeClass('active');
$(this).addClass('active');
});
});
.toggle-btn {
border: 1px solid #4c8cca;
display: inline-block;
line-height: 1;
width: 100px;
}
button {
line-height: 1;
float: left;
height: 30px;
background: none;
background-color: transparent;
border: none;
padding: 0;
position: relative;
outline: 0;
width: 50%;
cursor: pointer;
}
button:hover {
background-color: #EEE;
}
button.active {
background: #4c8cca;
background-color: #4c8cca;
color: #FFF;
}
button.active:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 25px;
transform: rotate(45deg);
background-color: #4c8cca;
left: 50%;
margin-left: -4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-btn">
<button>Yes</button>
<button class="active">No</button>
</div>
Here you go:
http://jsfiddle.net/es_kaija/negzqemp/
<div class="switch off">
<div class="toggle"></div>
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
<style>
.switch {
position: relative;
display: inline-block;
font-size: 1em;
font-weight: bold;
color: #ccc;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
height: 18px;
padding: 6px 6px 5px 6px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
background: #ececec;
box-shadow: 0px 0px 4px rgba(0,0,0,0.1), inset 0px 1px 3px 0px rgba(0,0,0,0.1);
cursor: pointer;
}
.switch span { display: inline-block; width: 35px; }
.switch span.On { color: #33d2da; }
.switch .toggle {
position: absolute;
top: 1px;
width: 37px;
height: 25px;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
background: #fff;
background: -moz-linear-gradient(top, #ececec 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: -o-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #ececec 0%,#ffffff 100%);
background: linear-gradient(top, #ececec 0%,#ffffff 100%);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5);
z-index: 999;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
}
.switch.on .toggle { left: 2%; }
.switch.off .toggle { left: 54%; }
</style>
<script>
$(document).ready(function() {
// Switch toggle
$('.switch').click(function() {
$(this).toggleClass('on').toggleClass('off');
});
});
</script>
You can do that using css itself. Here is the example - https://jsfiddle.net/p653bpbe/
html
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
css
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 1px solid #2E8DEF; border-radius: 0px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 26px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
background-clip: padding-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #FFFFFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #FFFFFF; color: #333333;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 45px; margin: 0px;
background: #2E8DEF;
position: absolute; top: 0; bottom: 0;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
Button
a { font-size: 0; line-height: 0; text-indent: -4000px; background: #fff; border: 1px solid #007bff; width: 30px; height: 30px; display: block; position: relative; }
a:after { position: absolute; top: -1px; left: 30px; width: 30px; height: 30px; content: ''; display: block; background: #007bff; border: 1px solid #007bff; }
a:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #007bff transparent transparent transparent; position: absolute; bottom: -10px; right: -25px; }