Instantly share code, notes, and snippets.
Created
March 9, 2020 08:27
-
Save norilog4/be2b60cc8168e5db2a157d22d41e237e to your computer and use it in GitHub Desktop.
光るボタン4色のデザインCSSコード(赤色・黄色・青色・緑色)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/************************************ | |
** 光る赤いボタン | |
************************************/ | |
.red-shiny a { | |
display: block; | |
position: relative; | |
z-index: 2; | |
overflow: hidden; | |
width: 100%; | |
font-weight: bold ; | |
border-bottom: solid 5px #bd6060 ; | |
border-radius: 5px; | |
background-color: #f88080 ; | |
color: #ffffff !important; | |
padding: 12px 0; | |
text-align: center; | |
text-decoration: none; | |
transition: .25s linear; | |
-webkit-transition: .25s linear; | |
-moz-transition: .25s linear; | |
} | |
.red-shiny { | |
display: block; | |
width: 100%; | |
margin-bottom: 1em; | |
} | |
.red-shiny a:hover { | |
-ms-transform: translateY(4px); | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px);/*下に動く*/ | |
border-bottom: none;/*線を消す*/ | |
} | |
.red-shiny:active { | |
border-bottom: none; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); /*影を小さく*/ | |
-webkit-transform: translateY(4px); | |
-ms-transform: translateY(4px); | |
transform: translateY(4px); /*下に動く*/ | |
} | |
.red-shiny a:before { | |
display: block; | |
position: absolute; | |
z-index: -1; | |
left: -30%; | |
top: -50%; | |
content: ""; | |
width: 100px; | |
height: 100px; | |
transform: rotate(20deg); | |
-webkit-transform: rotate(20deg); | |
-moz-transform: rotate(20deg); | |
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); | |
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(67%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); | |
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); | |
animation: shiny 3s infinite linear; | |
-webkit-animation: shiny 3s infinite linear; | |
-moz-animation: shiny 3s infinite linear; | |
} | |
@keyframes shiny { | |
0% { transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-webkit-keyframes shiny { | |
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; } | |
} | |
@-moz-keyframes shiny { | |
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-ms-keyframes shiny { | |
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-o-keyframes shiny { | |
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
/************************************ | |
** 光る黄色いボタン | |
************************************/ | |
.yellow-shiny a { | |
display: block; | |
position: relative; | |
z-index: 2; | |
overflow: hidden; | |
width: 100%; | |
font-weight: bold ; | |
border-bottom: solid 5px #bf9d1e ; | |
border-radius: 5px; | |
background-color: #fad02d ; | |
color: #ffffff !important; | |
padding: 12px 0; | |
text-align: center; | |
text-decoration: none; | |
transition: .25s linear; | |
-webkit-transition: .25s linear; | |
-moz-transition: .25s linear; | |
} | |
.yellow-shiny { | |
display: block; | |
width: 100%; | |
margin-bottom: 1em; | |
} | |
.yellow-shiny a:hover { | |
-ms-transform: translateY(4px); | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px);/*下に動く*/ | |
border-bottom: none;/*線を消す*/ | |
} | |
.yellow-shiny:active { | |
border-bottom: none; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); /*影を小さく*/ | |
-webkit-transform: translateY(4px); | |
-ms-transform: translateY(4px); | |
transform: translateY(4px); /*下に動く*/ | |
} | |
.yellow-shiny a:before { | |
display: block; | |
position: absolute; | |
z-index: -1; | |
left: -30%; | |
top: -50%; | |
content: ""; | |
width: 100px; | |
height: 100px; | |
transform: rotate(20deg); | |
-webkit-transform: rotate(20deg); | |
-moz-transform: rotate(20deg); | |
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); | |
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(67%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); | |
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); | |
animation: shiny 3s infinite linear; | |
-webkit-animation: shiny 3s infinite linear; | |
-moz-animation: shiny 3s infinite linear; | |
} | |
@keyframes shiny { | |
0% { transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-webkit-keyframes shiny { | |
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; } | |
} | |
@-moz-keyframes shiny { | |
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-ms-keyframes shiny { | |
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-o-keyframes shiny { | |
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
/************************************ | |
** 光る青いボタン | |
************************************/ | |
.blue-shiny a { | |
display: block; | |
position: relative; | |
z-index: 2; | |
overflow: hidden; | |
width: 100%; | |
font-weight: bold ; | |
border-bottom: solid 5px #3a76ba ; | |
border-radius: 5px; | |
background-color: #4f9df4 ; | |
color: #ffffff !important; | |
padding: 12px 0; | |
text-align: center; | |
text-decoration: none; | |
transition: .25s linear; | |
-webkit-transition: .25s linear; | |
-moz-transition: .25s linear; | |
} | |
.blue-shiny { | |
display: block; | |
width: 100%; | |
margin-bottom: 1em; | |
} | |
.blue-shiny a:hover { | |
-ms-transform: translateY(4px); | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px);/*下に動く*/ | |
border-bottom: none;/*線を消す*/ | |
} | |
.blue-shiny:active { | |
border-bottom: none; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); /*影を小さく*/ | |
-webkit-transform: translateY(4px); | |
-ms-transform: translateY(4px); | |
transform: translateY(4px); /*下に動く*/ | |
} | |
.blue-shiny a:before { | |
display: block; | |
position: absolute; | |
z-index: -1; | |
left: -30%; | |
top: -50%; | |
content: ""; | |
width: 100px; | |
height: 100px; | |
transform: rotate(20deg); | |
-webkit-transform: rotate(20deg); | |
-moz-transform: rotate(20deg); | |
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); | |
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(67%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); | |
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); | |
animation: shiny 3s infinite linear; | |
-webkit-animation: shiny 3s infinite linear; | |
-moz-animation: shiny 3s infinite linear; | |
} | |
@keyframes shiny { | |
0% { transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-webkit-keyframes shiny { | |
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; } | |
} | |
@-moz-keyframes shiny { | |
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-ms-keyframes shiny { | |
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-o-keyframes shiny { | |
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
/************************************ | |
** 光る緑色のボタン | |
************************************/ | |
.green-shiny a { | |
display: block; | |
position: relative; | |
z-index: 2; | |
overflow: hidden; | |
width: 100%; | |
font-weight: bold ; | |
border-bottom: solid 5px #6ca25f ; | |
border-radius: 5px; | |
background-color: #90d581 ; | |
color: #ffffff !important; | |
padding: 12px 0; | |
text-align: center; | |
text-decoration: none; | |
transition: .25s linear; | |
-webkit-transition: .25s linear; | |
-moz-transition: .25s linear; | |
} | |
.green-shiny { | |
display: block; | |
width: 100%; | |
margin-bottom: 1em; | |
} | |
.green-shiny a:hover { | |
-ms-transform: translateY(4px); | |
-webkit-transform: translateY(4px); | |
transform: translateY(4px);/*下に動く*/ | |
border-bottom: none;/*線を消す*/ | |
} | |
.green-shiny:active { | |
border-bottom: none; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); /*影を小さく*/ | |
-webkit-transform: translateY(4px); | |
-ms-transform: translateY(4px); | |
transform: translateY(4px); /*下に動く*/ | |
} | |
.green-shiny a:before { | |
display: block; | |
position: absolute; | |
z-index: -1; | |
left: -30%; | |
top: -50%; | |
content: ""; | |
width: 100px; | |
height: 100px; | |
transform: rotate(20deg); | |
-webkit-transform: rotate(20deg); | |
-moz-transform: rotate(20deg); | |
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); | |
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(67%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); | |
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); | |
animation: shiny 3s infinite linear; | |
-webkit-animation: shiny 3s infinite linear; | |
-moz-animation: shiny 3s infinite linear; | |
} | |
@keyframes shiny { | |
0% { transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-webkit-keyframes shiny { | |
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; } | |
} | |
@-moz-keyframes shiny { | |
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-ms-keyframes shiny { | |
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; } | |
} | |
@-o-keyframes shiny { | |
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; } | |
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; } | |
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; } | |
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
⬇️このコードの使い方を紹介しているブログ記事はこちら
https://noripon.blog/2020/03/09/how-to-make-wordpress-shortcode-css-shiny-button/