scss btn_shadow.scss

Posted 2021-05-18

// ボタン
$yellow: #feb140;
$yellow-shadow: #d99836;
$pink: #e4007f;
$pink-shadow: #bf0069;
$purple: #4d468f;
$purple-shadow: #2b274f;

@mixin btn-options($color, $shadow_color, $text, $textwidth) {
  background-color: $shadow_color;
  background-size: $textwidth;
  a {
    background-color: $color;
    background-image: image_path($text);
    background-size: $textwidth;
  }
}

@mixin btn-default-style {
    transition: all 0.1s;
    position: relative;
    width: 230px;
    height: 75px;
    border-radius: 10px;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;  
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    display: inline-block;
}

.action-button
{
    @include btn-default-style;
    margin-left: 40px;
    display: inline-block;
    margin-left: 40px;
    box-shadow: 0px 3px 7px #666;
    &:first-child {
        margin-left: 0;
    }
    a {
        @include btn-default-style;
        text-indent: -9999px;
        display: block;
        width: 100%;
        height: 100%;
        transform: translateY(-9px);
    }

    &.hikkoshi {
        @include btn-options($yellow, $yellow-shadow, "pc/txt_hikkoshi.png", 129px);
    }

    &.renai {
        @include btn-options($pink, $pink-shadow, "pc/txt_renai.png", 123px);
    }

    &.kabe {
        @include btn-options($purple, $purple-shadow, "pc/txt_kabe.png", 184px);
    }
}

.action-button:hover {
    cursor: pointer;
    opacity: 0.75;
}
.action-button:active
{
  a {
    transform: translateY(0px);
  }
}