Floating "New topic" button

support
4

I can do better than that … I believe this is the CSS (UPDATED):

@mixin buttonShadow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

@mixin buttonTransition {
  transition: right 0.5s, bottom 0.5s, border-radius 0.5s, text-indent 0.2s,
    visibility 1s, width 0.2s ease, height 0.5s ease 0.4s, color 0.5s,
    background-color 2s, transform 0.5s;
}

//New Topic Fab
#create-topic.btn-default {
  display: flex;
  align-items: center;
  justify-content: center;
  @include buttonShadow;
  @include buttonTransition;
  padding: 0;
  margin: 0;
  width: 63px;
  height: 63px;
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  background-color: $tertiary;
  color: $secondary;
  white-space: nowrap;
  overflow: hidden;
  .d-icon {
    margin: 0;
  }
  .d-button-label {
    display: inline-block;
    transition: all 0.3s;
    margin: 0 0.25em;
  }

  &:not(:hover):not(:active):not(:focus) {
    .d-button-label {
      opacity: 0;
      width: 0;
      margin: 0;
    }
    .d-icon {
      margin: 0 0.25em;
    }
  }
}

#create-topic.btn-default .fa-plus {
  color: $secondary;
}

#create-topic.btn-default:hover {
  width: 190px;
}
10 Likes