Css3 Media Temple Button

Published by Concept Phone Sabtu, 05 Januari 2019

http://mediatemple.net/affiliate

Tombol ini benar-benar keren!!!

CSS

.button {   cursor:pointer;   background:#328EC5;   background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);   background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);   background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);   background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);   background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);   padding:0.75em 1.5em;   font:normal 1em Calibri,Arial,Sans-Serif;   text-transform:uppercase;   color:#fff;   text-decoration:none;   text-shadow:0px -1px 0px rgba(0,0,0,0.3);   -webkit-box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.4),     0px 1px 2px rgba(0,0,0,0.7);   -moz-box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.4),     0px 1px 2px rgba(0,0,0,0.7);   box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.4),     0px 1px 2px rgba(0,0,0,0.7);   -webkit-border-radius:0.7em;   -moz-border-radius:0.7em;   border-radius:0.7em;   border:none; }  .button:hover {   background:#399BD6;   background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);   background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);   background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);   background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);   background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);   -webkit-box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.5),     0px 2px 4px rgba(0,0,0,0.4);   -moz-box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.5),     0px 2px 4px rgba(0,0,0,0.4);   box-shadow:     inset 0px 1px 0px rgba(255,255,255,0.5),     inset 0px -1px 0px rgba(0,0,0,0.5),     0px 2px 4px rgba(0,0,0,0.4); }  .button:active {   background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);   background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);   background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);   background:-o-linear-gradient(bottom, #88CEF7, #399BD6);   background:linear-gradient(bottom, #88CEF7, #399BD6);   -webkit-box-shadow:none;   -moz-box-shadow:none;   box-shadow:none; }

HTML

<a class="button" href="#">Get Started</a>

Demo

Get Started

Sumber https://www.dte.web.id/