Animated 3D buttons
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Πεμ Μαρ 30, 2017 10:30 am
HTML
CSS
- Κώδικας:
<div class="container">
<section class="3d-buttons">
<h2>Creative 3D Buttons GH</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit
</button>
</p>
<p class="btn_perspective">
<button class="btn btn-3d btn-3db">Submit
</button>
</p>
<p class="btn_perspective">
<button class="btn btn-3d btn-3dc">Submit
</button>
</p>
<p class="btn_perspective">
<button class="btn btn-3d btn-3dd">Submit
</button>
</p>
</section>
</div>
CSS
- Κώδικας:
*, *:after, *:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body, html{
font-size:100%;
padding:0;
margin:0;
height:100%;
}
body{
font-family:Arial, sans-serif;
background:#0e83cd;
}
a{
color:#888;
text-decoration:none;
}
a:hover,
a:active{
color:#333;
}
.container{
height:100%;
position:relative;
}
.container > section{
margin:0 auto;
padding:6em 3em;
text-align:center;
color:#fff;
}
h2{
color:#fff;
margin:20px;
text-align:center;
text-transform:uppercase;
}
/* General button styles */
.btn{
border:none;
position:relative;
background:none;
padding:28px 90px;
display:inline-block;
text-transform:uppercase;
margin:15px 30px;
color:inherit;
letter-spacing:2px;
font-size:0.9em;
outline:none;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
transition:all 0.4s;
cursor:pointer;
}
.btn:after{
content:"";
position:absolute;
z-index:-1;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
transition:all 04.s;
}
.btn_perspective{
-webkit-perspective:800px;
-moz-perspective:800px;
perspective:800px;
display:inline-block;
}
.btn-3d{
display:block;
background:#5cbcf6;
outline:1px solid transparent;
transform-style:preserve-3d;
}
.btn-3d:active{
background:#55b7f3;
}
.btn-3da:after{
width:100%;
height:42%;
left:0;
top:-40%;
background:#53a6d7;
transform-origin:0% 100%;
transform:rotateX(90deg);
}
.btn-3da:hover{
transform: rotateX(-45deg);
}
.btn-3db:after{
width:100%;
height:40%;
left:0;
top:100%;
background:#53a6d7;
transform-origin: 0% 0%;
transform:rotateX(-90deg);
}
.btn-3db:hover{
transform:rotateX(35deg);
}
.btn-3dc:after{
width:20%;
height:100%;
left:-20%;
top:0;
background:#53a6d7;
-webkit-transform-origin:100% 0%;
-webkit-transform:rotateY(-90deg);
-moz-transform-origin:100% 0%;
-moz-transform:rotateY(-90deg);
-ms-transform-origin:100% 0%;
-ms-transform:rotateY(-90deg);
transform-origin:100% 0%;
transform:rotateY(-90deg);
}
.btn-3dc:hover{
transform:rotateY(25deg);
}
.btn-3dd:after{
width:20%;
height:100%;
left:100%;
top:0;
background:#53a6d7;
-webkit-transform-origin:0% 0%;
-webkit-transform:rotateY(90deg);
-moz-transform-origin:0% 0%;
-moz-transform:rotateY(90deg);
-ms-transform-origin:0% 0%;
-ms-transform:rotateY(90deg);
transform-origin:0% 0%;
transform:rotateY(90deg);
}
.btn-3dd:hover{
-webkit-transform:rotateY(-15deg);
-moz-transform:rotateY(-15deg);
-ms-transform:rotateY(-15deg);
transform:rotateY(-15deg);
}
@media screen and (max-width:480px){
.container{
font-size:1.2em;
}
}
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
