Slider button on the CSS




The idea

It all started with the fact that I zahodel to make the switching element in the system settings menu Android. To do exactly the same is not interesting and rather simple, so I made some choices more difficult and more spectacular.

Explanation:

All the samples are written using the technology of the anchor tag label, tag input using standard HTML (supported since IE7). Yes, there is a feature and this is the purpose of the same id tag for input and label. But usually it does not cause problems. However, thus, it is possible to remove values from input a simple transfer form.

 

Button No. 1

It is very simple, and it is changing left and background-color switch.

  1. #slide-button-1 {
  2. position: relative;
  3. display: inline-block;
  4. height: 30px;
  5. width: 60px;
  6. background-color: gray;
  7. border: 3px solid black;
  8. box-sizing: border-box;
  9. border-radius: 15px;
  10. cursor: default;
  11. }
  12. #slide-button-1 > label {
  13. position: absolute;
  14. width: 35%;
  15. top: 10%;
  16. bottom: 10%;
  17. left: 5%;
  18. background-color: lightcoral;
  19. box-sizing: border-box;
  20. border-radius: 20px;
  21. z-index: 1;
  22. cursor: pointer;
  23. transition: left .4s,
  24. background-color .4s;
  25. }
  26. #input-slide-1:checked + #slide-button-1 > label {
  27. left: 60%;
  28. background-color: lightgreen;
  29. }

 

Button No. 2

For option number 1 added pseudo-element :beforethat changes option left when changing checkbox. And that this element was not visible to the parent of the added overflow: hidden;.

  1. #slide-button-2 {
  2. position: relative;
  3. display: inline-block;
  4. height: 30px;
  5. width: 60px;
  6. background-color: lightcoral;
  7. border: 3px solid black;
  8. box-sizing: border-box;
  9. border-radius: 15px;
  10. cursor: default;
  11. overflow: hidden;
  12. }
  13. #slide-button-2:before {
  14. content: "";
  15. position: absolute;
  16. display: block;
  17. height: 100%;
  18. width: 100%;
  19. top: 0;
  20. left: -100%;
  21. background-color: lightgreen;
  22. transition: .4s;
  23. }
  24. #slide-button-2 > label {
  25. position: absolute;
  26. width: 35%;
  27. top: 10%;
  28. bottom: 10%;
  29. left: 5%;
  30. background-color: black;
  31. box-sizing: border-box;
  32. border-radius: 20px;
  33. z-index: 1;
  34. cursor: pointer;
  35. transition: left .4s,
  36. background-color .4s;
  37. }
  38. #input-slide-2:checked + #slide-button-2:before {
  39. left: 0;
  40. }
  41. #input-slide-2:checked + #slide-button-2 > label {
  42. left: 60%;
  43. }

 

Button No. 3

Heavily modified, relative to option # 1 and # 2.

Dobalina pseudo-elements :before and :afterthat contain the words "ON" and "OFF" respectively.

Also changed the "behavior" of the slider when changing the checkbox. He first changes the width (using left and right), and then returns to the desired position.

After all, you probably know that the width of the unit can be set both height and width, but using the rules for positioning the top and bottom (sets the height of the block), left and right (specifies the width of the block).

  1. #slide-button-3 {
  2. position: relative;
  3. display: inline-block;
  4. height: 30px;
  5. width: 60px;
  6. background-color: black;
  7. box-sizing: border-box;
  8. border-radius: 15px;
  9. cursor: default;
  10. }
  11. #slide-button-3 > label {
  12. position: absolute;
  13. top: 20%;
  14. bottom: 20%;
  15. left: 10%;
  16. right: 60%;
  17. background-color: lightcoral;
  18. box-sizing: border-box;
  19. border-radius: 20px;
  20. z-index: 1;
  21. cursor: pointer;
  22. transition: left .4s,
  23. right .4s ease .4s,
  24. background-color .8s;
  25. }
  26. #input-slide-3:checked + #slide-button-3 > label {
  27. left: 60%;
  28. right: 10%;
  29. background-color: lightgreen;
  30. transition: right .4s,
  31. left .4s ease .4s,
  32. background-color .8s;
  33. }
  34. #slide-button-3:before,
  35. #slide-button-3:after {
  36. bottom: 50%;
  37. font-size: 12px;
  38. margin-bottom: -6px;
  39. font-family: Verdana;
  40. font-weight: bold;
  41. position: absolute;
  42. display: block;
  43. line-height: 1;
  44. }
  45. #slide-button-3:before {
  46. content: "OFF";
  47. color: lightcoral;
  48. right: 10%;
  49. opacity: 1;
  50. transition: opacity .4s ease .4s;
  51. }
  52. #input-slide-3:checked + #slide-button-3:before {
  53. opacity: 0;
  54. transition: opacity .4s;
  55. }
  56. #slide-button-3:after {
  57. content: "ON";
  58. color: lightgreen;
  59. left: 10%;
  60. opacity: 0;
  61. transition: opacity .4s;
  62. }
  63. #input-slide-3:checked + #slide-button-3:after {
  64. opacity: 1;
  65. transition: opacity .4s ease .4s;
  66. }

The examples in the DEMO.

Live demo
Download ZIP







Found comments - 3






Козлов Андрей November 03, 2015
Ещё раз... Про селекторы CSS, в том числе какие работают, а какие не работают на IE (прости меня господи), написана статья на этом сайте! Про правила CSS смотрите caniuse.com . Всё :-)
Silver November 01, 2015
в моем IEтестере в IE8 не работает, а в IE9 работает, но без плавности.
Silver November 01, 2015
Если я не ошибаюсь, transition работает в IE10+?
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result