Css buttons animation with transition properties.
A Pen by Oleg Semenov on CodePen.
<div class="wrapper"> | |
<h1>{ css 3 }</h1> | |
<p>css buttons animation with transition properties</p> | |
<div class="btn-groups"> | |
<div class="btn-red-tr">danger</div> | |
<div class="btn-green-tr">success </div> | |
<div class="btn-blue-tr">pirmary</div> | |
<div class="btn-red-qa">danger</div> | |
<div class="btn-green-qa">success </div> | |
<div class="btn-blue-qa">pirmary</div> | |
</div> | |
</div> |
$color-button-red: #e74c3c; | |
$color-button-green: #2ecc71; | |
$color-button-blue: #3498db; | |
$color-text: #ecf0f1; | |
$font-family: Arial, helvetica, sans-serif; | |
$font-size: 100%; | |
// global style | |
body { | |
font-size: $font-size; | |
font-family: $font-family; | |
} | |
.wrapper { | |
width: 720px; | |
margin: 45px auto; | |
h1 { | |
font-size: $font-size + 180%; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
p { | |
font-size: $font-size + 50%; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.btn-groups { | |
width: 640px; | |
margin: 0 auto; | |
} | |
} | |
// button --tr | |
.btn-red-tr, .btn-green-tr, .btn-blue-tr { | |
min-width: 130px; | |
position: relative; | |
display: inline-block; | |
text-align: center; | |
text-transform: uppercase; | |
padding: 15px; | |
margin: 30px 25px; | |
font-size: $font-size + 40%; | |
font-weight: 600; | |
color: $color-text; | |
transition: 0.5s; | |
} | |
.btn-red-tr { background-color: $color-button-red; } | |
.btn-green-tr { background-color: $color-button-green; } | |
.btn-blue-tr { background-color: $color-button-blue; } | |
.btn-red-tr:before { | |
position: absolute; | |
content:""; | |
border-top: 5px solid lighten($color-button-red, 5%); | |
border-left: 5px solid lighten($color-button-red, 5%); | |
border-right: 5px solid darken($color-button-red, 5%); | |
border-bottom: 5px solid darken($color-button-red, 5%); | |
top: 0px; | |
right: 0px; | |
bottom: 0px; | |
left: 0px; | |
transition: 0.5s; | |
} | |
.btn-green-tr:before { | |
position: absolute; | |
content:""; | |
border-top: 5px solid lighten($color-button-green, 5%); | |
border-left: 5px solid lighten($color-button-green, 5%); | |
border-right: 5px solid darken($color-button-green, 5%); | |
border-bottom: 5px solid darken($color-button-green, 5%); | |
top: 0px; | |
right: 0px; | |
bottom: 0px; | |
left: 0px; | |
transition: 0.5s; | |
} | |
.btn-blue-tr:before { | |
position: absolute; | |
content:""; | |
border-top: 5px solid lighten($color-button-blue, 5%); | |
border-left: 5px solid lighten($color-button-blue, 5%); | |
border-right: 5px solid darken($color-button-blue, 5%); | |
border-bottom: 5px solid darken($color-button-blue, 5%); | |
top: 0px; | |
right: 0px; | |
bottom: 0px; | |
left: 0px; | |
transition: 0.5s; | |
} | |
.btn-red-tr:hover { | |
box-shadow: 7px 7px darken($color-button-red, 20%), -7px -7px lighten($color-button-red, 20%); | |
cursor: pointer; | |
&::before { | |
border: 0px ; | |
} | |
} | |
.btn-green-tr:hover { | |
box-shadow: 7px 7px darken($color-button-green, 20%), -7px -7px lighten($color-button-green, 20%); | |
cursor: pointer; | |
&::before { | |
border: 0px ; | |
} | |
} | |
.btn-blue-tr:hover { | |
box-shadow: 7px 7px darken($color-button-blue, 20%), -7px -7px lighten($color-button-blue, 20%); | |
cursor: pointer; | |
&::before { | |
border: 0px ; | |
} | |
} | |
// button --qa | |
.btn-red-qa, .btn-green-qa, .btn-blue-qa { | |
min-width: 120px; | |
position: relative; | |
display: inline-block; | |
text-align: center; | |
text-transform: uppercase; | |
padding: 10px 15px; | |
margin: 30px 25px; | |
font-size: $font-size + 40%; | |
font-weight: 600; | |
transition: 0.5s; | |
} | |
.btn-red-qa { border: 5px solid $color-button-red; color: $color-button-red;} | |
.btn-green-qa { border: 5px solid $color-button-green; color: $color-button-green; } | |
.btn-blue-qa { border: 5px solid $color-button-blue; color: $color-button-blue; } | |
.btn-red-qa:hover { | |
cursor: pointer; | |
&::before { | |
border: 0px ; | |
} | |
} | |
.btn-green-qa:hover { | |
cursor: pointer; | |
&::before { | |
border: 0px ; | |
} | |
} | |
.btn-blue-qa:hover { | |
background-color: darken($color-button-blue, 5%); | |
border: 5px solid lighten($color-button-blue, 5%); | |
color: $color-text; | |
cursor: pointer; | |
} | |
.btn-red-qa:hover { | |
background-color: darken($color-button-red, 5%); | |
border: 5px solid lighten($color-button-red, 5%); | |
color: $color-text; | |
cursor: pointer; | |
} | |
.btn-green-qa:hover { | |
background-color: darken($color-button-green, 5%); | |
border: 5px solid lighten($color-button-green, 5%); | |
color: $color-text; | |
cursor: pointer; | |
} |