HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers96/smilefotografie.nl/wwwroot/css/partials/_buttons.sass
.button
  display: inline-block
  position: relative
  left: -2px
  box-sizing: content-box

  padding: 0 15px
  height: 40px
  line-height: 40px

  border: 2px solid #000
  background: #fff
  color: #000

  font-size: .818182em
  font-weight: 700
  cursor: pointer

  +transition(all 150ms ease-out)

  +respond-to(small)
    height: 30px
    line-height: 30px

  &:hover
    border: 2px solid #fff
    background: #000
    color: #fff

  &.black
    border: 2px solid #fff
    background: #000
    color: #fff

    &:hover
      border: 2px solid #000
      background: #fff
      color: #000

  &.blue
    border: 2px solid #fff
    background: $blue
    color: #fff

    &:hover
      border: 2px solid $blue
      background: #fff
      color: $blue

  &.on-grey
    border: 2px solid $background
    background: #000
    color: #fff

    &:hover
      border: 2px solid #000
      background: $background
      color: #000

  // White button black arrow
  &.arrow
    padding-right: 35px

    &:after
      content: ''
      display: block
      +position(absolute, 50% 12px null null)
      margin-top: -4px
      +sprite(14px, 10px, -200px -10px)

    // On hover white arrow
    &:hover
      &:after
        +sprite(14px, 10px, -220px -10px)

    // Black arrow to the left
    &.back
      padding-right: 15px
      padding-left: 35px

      &:after
        left: 12px
        right: auto
        background-position: -200px -25px

      // On hover white arrow
      &:hover
        &:after
          +sprite(14px, 10px, -220px -25px)

    // Black button white arrow
    &.black
      &:after
        +sprite(14px, 10px, -220px -10px)

      // On hover: black arrow
      &:hover
        &:after
          +sprite(14px, 10px, -200px -10px)

    // Black button white arrow to the left
    &.black.back
      &:after
        +sprite(14px, 10px, -220px -25px)

      // On hover: black arrow
      &:hover
        &:after
          +sprite(14px, 10px, -200px -25px)

  &[type="button"],
  &[type="submit"]
    //border: none
    +roboto
    cursor: pointer