タイトルとURLをコピーしました
.floating-banner { position: fixed; z-index: 99999; bottom: 0; right: 0; } .floating-banner:hover { opacity: .9; } .banner { width: 100vw; padding: 8px; background: #5f9ea0;/* バナーの背景色 */ color: #fff;/* バナー内の文字色 */ font-weight: bold; text-align: center; } .floating-banner a { text-decoration: none; } .copy { font-size: 16px; padding: 5px auto; line-height: 1.6; } .cta { display: block; position: relative; width: 80%; padding: 10px 0; margin: 0px auto 5px auto; background-color: #5f9ea0;/*ボタンの色*/ box-shadow: 0 3px 0 0 rgba(107, 142, 35, 1);/*影の色(rgbaの値を変更)*/ border-radius: 25px; font-weight: bold; font-size: 18px; color: #fff; text-align: center; text-decoration: none; overflow: hidden; transition: 0.2s; } .cta:hover { text-decoration: none; color: #fff; box-shadow: none; -webkit-transform: translateY(3px); } .cta::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: cta 3s ease-in-out infinite; } @-webkit-keyframes cta { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } @media screen and (min-width: 560px) { .floating-banner { display: none; } } @media screen and (max-width: 560px) { .floating-banner { display: inline-block; } }