Mẫu Button ấn tượng 5
Chia sẻ
Mẫu button này dùng cho nút click kiểu mạng xã hội
1. HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'><button class="button search">Search</button><br/><br/><button class="button arrow">Read more</button><br/><br/><button class="button email">me@email.com</button><br/><br/><button class="button phone">tel: 1234 567 890</button>
2. CSS
body {
background: #303036;
text-align: center;
text-rendering: auto;
font-size: 17px;
line-height: 1.6em;
height: 100vh;
overflow: hidden;
padding: 18%;
padding-top: 25vh;
}
* {
box-sizing: border-box;
}
.button {
display: inline-block;
font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
position: relative;
padding: 0.8em 1.4em;
padding-right: 4.7em;
background: #009ED8;
border: none;
color: white;
transition: 0.2s;
}
.button:before,
.button:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding-top: inherit;
padding-bottom: inherit;
width: 2.8em;
content: "\00a0";
font-family: 'FontAwesome', sans-serif;
font-size: 1.2em;
text-align: center;
transition: 0.2s;
transform-origin: 50% 60%;
}
.button:before {
background: rgba(0, 0, 0, 0.1);
}
.button:hover {
background: #0079a5;
}
.button:active,
.button:focus {
background: #002e3f;
outline: none;
}
.button {
min-width: 15em;
}
.arrow {
background: #FE5F55;
}
.arrow:hover {
background: #fe2f22;
}
.arrow:active,
.arrow:focus {
background: #b90c01;
}
.arrow:after {
content: "\F054";
}
.arrow:hover:after {
-webkit-animation: bounceright 0.3s alternate ease infinite;
animation: bounceright 0.3s alternate ease infinite;
}
.phone {
background: #139675;
}
.phone:hover {
background: #0d6952;
}
.phone:active,
.phone:focus {
background: #083b2e;
}
.phone:after {
content: "\F095";
}
.phone:hover:after {
-webkit-animation: wiggle 0.05s alternate ease infinite;
animation: wiggle 0.05s alternate ease infinite;
}
.email {
background: #C673B3;
}
.email:hover {
background: #b74f9f;
}
.email:active,
.email:focus {
background: #963d82;
}
.email:after {
content: "\F0E0";
}
.email:hover:after {
-webkit-animation: none;
-webkit-transform: skew(-20deg);
animation: none;
transform: skew(-20deg);
text-indent: 0.1em;
}
.search:after {
content: "\f002";
}
.search:hover:after {
-webkit-animation: none;
-webkit-transform: scale(1.4);
animation: none;
transform: scale(1.4);
}
@-webkit-keyframes bounceright {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(3px);
}
}
@-webkit-keyframes wiggle {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(30deg);
}
}
@keyframes bounceright {
from {
transform: translateX(0);
}
to {
transform: translateX(3px);
}
}
@keyframes wiggle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(30deg);
}
}
3. JAVASCRIPT
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút Chia sẻđể mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.