Skip to content

Instantly share code, notes, and snippets.

@yuririn yuririn/btn-css2.css Secret
Last active Jun 15, 2018

Embed
What would you like to do?
// アイコンがプルプル
.tremble{
color: #ffffff;
text-shadow: 0 1px 1px #C94528;
display: inline-block;
text-align: center;
background: linear-gradient(to bottom, #ffd8d8 0%, #db6d6d 100%);
box-shadow: 0 1px 1px #C94528;
border-radius: 10px;
padding: 15px 25px;
transition: .3s;
}
.tremble:hover i{
animation: poyopoyo 1.5s;
}
.tremble:active{
background: linear-gradient(to bottom, #db6d6d 0%,#db6d6d 100%);
transform: translate(0,2px);
box-shadow: 0 1px #C94528;
}
@keyframes poyopoyo {
0% {transform: translate(0px, 0px) rotate(0deg)}
15% {transform: translate(2px, 2px) rotate(15deg) scale(1.6,1.4)}
35% {transform: translate(0px, 2px) rotate(0deg) }
40% {transform: translate(2px, 0px) rotate(-10deg) scale(.9,.8)}
47% {transform: translate(0px, 2px) rotate(0deg) scale(1,1)}
60% {transform: translate(2px, 0px) rotate(5deg) scale(.95,.9)}
70% {transform: translate(0px, 0px) rotate(0deg)}
}
// マウスオーバーしたらtext-shadowで鮮やかに
.rainbow{
background: transparent;
color:#333 ;
position: relative;
padding: 15px 25px;
display: inline-block;
text-align: center;
transition: .3s;
letter-spacing: .2em;
border: 1px solid #333;
}
.rainbow:hover{
padding:8px 25px 22px 25px;
text-shadow:0 7px rgb(76, 255, 53),0 15px rgb(252, 231, 43)
}
.rainbow:active{
color: rgb(76, 255, 53);
background: #333;
padding:15px 25px 15px 25px;
text-shadow:none;
}
// マウスオーバーで波紋
.hamon{
border-radius: 10px;
color:#fff;
background: rgb(3, 63, 112);
position: relative;
padding: 30px 40px;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
transition: .3s;
}
.hamon::before,
.hamon::after{
position: absolute;
content: '';
display: block;
width: 10px;
height: 10px;
left: calc(50% - 5px);
top: calc(50% - 5px);
border-radius: 50%;
background: rgba(255, 255, 255, .1);
transform: scale(0,0);
}
.hamon:active{
opacity: .7;
}
.hamon:hover::before{
animation: hamon 2s infinite;
}
.hamon:hover::after{
animation: hamon 2s .3s infinite;
}
@keyframes hamon {
0% { transform: scale(0,0);}
100% { transform: scale(50,50);opacity: 0;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.