Skip to content

Instantly share code, notes, and snippets.

@yuririn yuririn/btn-css3.css
Created Jun 15, 2018

Embed
What would you like to do?
// 四角で囲う
.rectangle{
color:#fff;
background: rgb(255, 80, 49);
position: relative;
padding: 20px 30px;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
}
.rectangle::before{
opacity: 0;
position: absolute;
content: '';
display: block;
border:1px solid #ffffff;
width: calc(100% - 10px);
height: calc(100% - 10px);
left: 5px;
top: 5px;
transition: .3s;
}
.rectangle:hover::before{
opacity: 1;
}
.rectangle:active::before{
border-style: dashed;
}
.rectangle:active::before{
border-style: double;
border-width: 4px;
}
// ブロックっぽいやつ
.block{
font-size: 20px;
letter-spacing: .3em;
position: relative;
display: inline-block;
padding: 15px 20px;
text-decoration: none;
background: #00BCD4;/*背景色*/
color: #00BCD4;/*=背景色*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2),0 2px 0 #118e9e;
border-radius: 4px;
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.589), 1px 1px rgba(0, 0, 0, 0.38);
transition: .3s;
}
.block:active {
transform: translate(0,2px);
box-shadow: none;
text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}
// 立体的なボタン
._3d{
width: 200px;
text-align: center;
position: relative;
display: block;
}
._3d span {
padding: 15px 20px;
display: block;
position: absolute;
width: 200px;
border: 2px solid #333;
text-align: center;
transition: .3s;
}
._3d span:nth-child(1) {
background-color: #333;
color: #fff;
transform: rotateY(90deg);
transform-origin: 50% 50% -50px;
}
._3d span:nth-child(2) {
background-color: #fff;
color: #333;
transform: rotateY(0deg);
transform-origin: 50% 50% -50px;
}
._3d:hover span:nth-child(1) {
transform: rotateY(0deg);
z-index: 1;
}
._3d:hover span:nth-child(2) {
background-color: #333;
transform: rotateY(-90deg);
}
._3d:active span:nth-child(1){
background: rgb(255, 102, 42);
border-color: rgb(255, 102, 42);
}
// 背景がアニメーションするボタン
.stripe{
font-weight: bold;
letter-spacing: .2em;
display: inline-block;
z-index: 1;
padding: 16px 20px;
width: 200px;
overflow: hidden;
text-align: center;
background: rgb(245, 98, 0);
color: #ffffff;
position: relative;
}
.stripe::before{
z-index: -1;
content: '';
width: calc(200% + 40px);
position: absolute;
left: calc(-100% - 40px);
height: 100%;
display: block;
top: 0;
background: linear-gradient(135deg, rgba(242,144,46,1) 55%,rgb(245, 98, 0) 55%);
transition: .3s;
}
.stripe:hover::after{
z-index: 1;
content: '';
width: 50px;
height: 50px;
position: absolute;
display: block;
bottom: 0;
right: 0;
background: linear-gradient(135deg, rgba(242,144,46,0) 50%,rgb(245, 98, 0) 50%);
}
.stripe:hover::before{
left: 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.