# bubble-menu/3.1/public/assets/css/style.css

Bubble Menu – Floating Button Menu with Sticky Navigation, version 3.1. 584 lines.

- Page: https://pluginprobe.com/plugins/bubble-menu/3.1/code/public/assets/css/style.css
- Raw: https://pluginprobe.com/plugins/bubble-menu/3.1/raw/public/assets/css/style.css
- Modified: 2023-08-29T07:21:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/bubble-menu/3.1/code/public/assets/css/style.css#L10-L20`.

```css
/* reset */

.wow-bmp,
.wow-bmp * {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none;
}


/* basic styles */

.wow-bmp {
  position: fixed;
  z-index: 1000;
  width: 48px;
  height: 48px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.wow-bmp input {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.wow-bmp a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -webkit-transition: background 0.5s;
}

.wow-bmp i {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 30px;
  line-height: 48px;
  text-align: center;
  transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -webkit-transition: color 0.5s, -webkit-transform 0.5s;
}

.wow-bmp .icon-plus {
  line-height: 50px;
}

.wow-bmp li {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.wow-bmp li a {
  position: static;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.wow-bmp li i {
  font-size: 20px;
  line-height: 38px;
}

.wow-bmp input:checked + a i {
  transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.wow-bmp input:checked + a .icon-plus {
  transform: rotate(315deg);
  -o-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}


/* animations */

.wow-bmp li:nth-child(2) {
  -webkit-transition-delay: 0.1s;
}

.wow-bmp li:nth-child(3) {
  -webkit-transition-delay: 0.2s;
}

.wow-bmp li:nth-child(4) {
  -webkit-transition-delay: 0.3s;
}

.wow-bmp li:nth-child(5) {
  -webkit-transition-delay: 0.4s;
}

.wow-bmp li:nth-child(6) {
  -webkit-transition-delay: 0.5s;
}

.wow-bmp li:nth-child(7) {
  -webkit-transition-delay: 0.6s;
}

.wow-bmp li:nth-child(8) {
  -webkit-transition-delay: 0.7s;
}

.wow-bmp li:nth-child(9) {
  -webkit-transition-delay: 0.8s;
}

.wow-bmp li:nth-child(10) {
  -webkit-transition-delay: 0.9s;
}

.wow-bmp li:nth-child(11) {
  -webkit-transition-delay: 1.0s;
}

.wow-bmp li:nth-child(12) {
  -webkit-transition-delay: 1.1s;
}

.wow-bmp li:nth-child(13) {
  -webkit-transition-delay: 1.2s;
}

.wow-bmp li:nth-child(14) {
  -webkit-transition-delay: 1.3s;
}

.wow-bmp li:nth-child(15) {
  -webkit-transition-delay: 1.4s;
}

.wow-bmp li:nth-child(16) {
  -webkit-transition-delay: 1.5s;
}

.wow-bmp.wow-bmp-effect-aao li {
  -webkit-transition-delay: 0s;
}

.wow-bmp.wow-bmp-effect-fade li {
  opacity: 0;
}

.wow-bmp.wow-bmp-effect-fade input:checked ~ ul li {
  opacity: 1;
}

.wow-bmp.wow-bmp-effect-rotate input:checked ~ ul li {
  transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.wow-bmp.wow-bmp-effect-scale li {
  transform: scale(0.1, 0.1);
  -o-transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
}

.wow-bmp.wow-bmp-effect-scale input:checked ~ ul li {
  transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

.wow-bmp.wow-bmp-effect-rotate.wow-bmp-effect-scale li {
  transform: rotate(0deg) scale(0.1, 0.1);
  -o-transform: rotate(0deg) scale(0.1, 0.1);
  -ms-transform: rotate(0deg) scale(0.1, 0.1);
  -moz-transform: rotate(0deg) scale(0.1, 0.1);
  -webkit-transform: rotate(0deg) scale(0.1, 0.1);
}

.wow-bmp.wow-bmp-effect-rotate.wow-bmp-effect-scale input:checked ~ ul li {
  transform: rotate(360deg) scale(1, 1);
  -o-transform: rotate(360deg) scale(1, 1);
  -ms-transform: rotate(360deg) scale(1, 1);
  -moz-transform: rotate(360deg) scale(1, 1);
  -webkit-transform: rotate(360deg) scale(1, 1);
}


/* postions */

.wow-bmp-pos-tl {
  top: 20px;
  left: 20px;
}

.wow-bmp-pos-t {
  top: 20px;
  left: 50%;
  margin-left: -24px;
}

.wow-bmp-pos-tr {
  top: 20px;
  right: 20px;
}

.wow-bmp-pos-r {
  top: 50%;
  right: 20px;
  margin-top: -24px;
}

.wow-bmp-pos-br {
  right: 20px;
  bottom: 20px;
}

.wow-bmp-pos-b {
  bottom: 20px;
  left: 50%;
  margin-left: -24px
}

.wow-bmp-pos-bl {
  bottom: 20px;
  left: 20px;
}

.wow-bmp-pos-l {
  top: 50%;
  left: 20px;
  margin-top: -24px;
}

/* tooltips */

.wow-bmp em {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.8);
  font-style: normal;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.wow-bmp li:hover em {
  opacity: 1;
}

.wow-bmp li:hover .tl {
  top: auto;
  right: 100%;
  bottom: 100%;
  left: auto;
}

.wow-bmp li:hover .tr {
  top: auto;
  bottom: 100%;
  left: 100%;
}

.wow-bmp li:hover .r {
  top: 50%;
  left: 100%;
  margin-top: -11px;
  margin-left: 7px;
}

.wow-bmp li:hover .br {
  top: 100%;
  left: 100%;
}

.wow-bmp li:hover .bl {
  top: 100%;
  right: 100%;
  left: auto;
}

.wow-bmp li:hover .l {
  top: 50%;
  right: 100%;
  left: auto;
  margin-top: -11px;
  margin-right: 7px;
}

.wow-bmp .tlem {
  top: auto;
  right: 100%;
  bottom: 100%;
  left: auto;
  opacity: 1;
}

.wow-bmp .trem {
  top: auto;
  bottom: 100%;
  left: 100%;
  opacity: 0;
}

.wow-bmp .rem {
  top: 50%;
  left: 100%;
  margin-top: -11px;
  margin-left: 7px;
  opacity: 1;
}

.wow-bmp .brem {
  top: 100%;
  left: 100%;
  opacity: 1;
}

.wow-bmp .blem {
  top: 100%;
  right: 100%;
  left: auto;
  opacity: 1;
}

.wow-bmp .lem {
  top: 50%;
  right: 100%;
  left: auto;
  margin-top: -11px;
  margin-right: 7px;
  opacity: 1;
}

.wow-bmp input:checked ~ ul li .tlem,
.wow-bmp input:checked ~ ul li .trem,
.wow-bmp input:checked ~ ul li .rem,
.wow-bmp input:checked ~ ul li .brem,
.wow-bmp input:checked ~ ul li .blem,
.wow-bmp input:checked ~ ul li .lem {
  opacity: 1;
}

/* shapes */

.wow-bmp-shape-ellipse a,
.wow-bmp-shape-ellipse li a {
  border-radius: 25% 75%;
}

.wow-bmp-shape-rsquare a,
.wow-bmp-shape-rsquare li a {
  border-radius: 25%;
}

.wow-bmp-shape-square a,
.wow-bmp-shape-square li a {
  border-radius: 0;
}


/*                                   COLORS                                   */

/* white */

.wow-bmp i.color-white,
.wow-bmp i.hcolor-white:hover,
.wow-bmp input:hover + a i.hcolor-white {
  color: #ffffff;
}

.wow-bmp a.color-white,
.wow-bmp a.hcolor-white:hover,
.wow-bmp input:hover + a.hcolor-white {
  background: #ffffff;
}


/* grey */

.wow-bmp i.color-grey,
.wow-bmp i.hcolor-grey:hover,
.wow-bmp input:hover + a i.hcolor-grey {
  color: #808080;
}

.wow-bmp a.color-grey,
.wow-bmp a.hcolor-grey:hover,
.wow-bmp input:hover + a.hcolor-grey {
  background: #808080;
}


/* black */

.wow-bmp i.color-black,
.wow-bmp i.hcolor-black:hover,
.wow-bmp input:hover + a i.hcolor-black {
  color: #000000;
}

.wow-bmp a.color-black,
.wow-bmp a.hcolor-black:hover,
.wow-bmp input:hover + a.hcolor-black {
  background: #000000;
}

/* red */
.wow-bmp i.color-red,
.wow-bmp i.hcolor-red:hover,
.wow-bmp input:hover + a i.hcolor-red {
  color: #e3001b;
}

.wow-bmp a.color-red,
.wow-bmp a.hcolor-red:hover,
.wow-bmp input:hover + a.hcolor-red {
  background: #e3001b;
}


/* orange */

.wow-bmp i.color-orange,
.wow-bmp i.hcolor-orange:hover,
.wow-bmp input:hover + a i.hcolor-orange {
  color: #f60;
}

.wow-bmp a.color-orange,
.wow-bmp a.hcolor-orange:hover,
.wow-bmp input:hover + a.hcolor-orange {
  background: #f60;
}


/* yellow */

.wow-bmp i.color-yellow,
.wow-bmp i.hcolor-yellow:hover,
.wow-bmp input:hover + a i.hcolor-yellow {
  color: #ffcc01;
}

.wow-bmp a.color-yellow,
.wow-bmp a.hcolor-yellow:hover,
.wow-bmp input:hover + a.hcolor-yellow {
  background: #ffcc01;
}

/* lime */

.wow-bmp i.color-lime,
.wow-bmp i.hcolor-lime:hover,
.wow-bmp input:hover + a i.hcolor-lime {
  color: #b1c903;
}

.wow-bmp a.color-lime,
.wow-bmp a.hcolor-lime:hover,
.wow-bmp input:hover + a.hcolor-lime {
  background: #b1c903;
}

/* green */

.wow-bmp i.color-green,
.wow-bmp i.hcolor-green:hover,
.wow-bmp input:hover + a i.hcolor-green {
  color: #27a22d;
}

.wow-bmp a.color-green,
.wow-bmp a.hcolor-green:hover,
.wow-bmp input:hover + a.hcolor-green {
  background: #27a22d;
}


/* cyan */

.wow-bmp i.color-cyan,
.wow-bmp i.hcolor-cyan:hover,
.wow-bmp input:hover + a i.hcolor-cyan {
  color: #00b1e5;
}

.wow-bmp a.color-cyan,
.wow-bmp a.hcolor-cyan:hover,
.wow-bmp input:hover + a.hcolor-cyan {
  background: #00b1e5;
}

/* blue */

.wow-bmp i.color-blue,
.wow-bmp i.hcolor-blue:hover,
.wow-bmp input:hover + a i.hcolor-blue {
  color: #006bb3;
}

.wow-bmp a.color-blue,
.wow-bmp a.hcolor-blue:hover,
.wow-bmp input:hover + a.hcolor-blue {
  background: #006bb3;
}


/* purple */

.wow-bmp i.color-purple,
.wow-bmp i.hcolor-purple:hover,
.wow-bmp input:hover + a i.hcolor-purple {
  color: #ad007c;
}

.wow-bmp a.color-purple,
.wow-bmp a.hcolor-purple:hover,
.wow-bmp input:hover + a.hcolor-purple {
  background: #ad007c;
}

/* pink */

.wow-bmp i.color-pink,
.wow-bmp i.hcolor-pink:hover,
.wow-bmp input:hover + a i.hcolor-pink {
  color: #ea4c89;
}

.wow-bmp a.color-pink,
.wow-bmp a.hcolor-pink:hover,
.wow-bmp input:hover + a.hcolor-pink {
  background: #ea4c89;
}
```