Sharp Green Pointer Css3 Button Download | TutorialMe Galaxy
Latest U Stars :
Home » » Css3 Button Download

Css3 Button Download

| 0 komentar




Sisipkan Di CSS
/* Button Download Css3 Name: DHF BUTTON Designer: Dharla Ferdana URL: http://www.dhf.web.id */ .button { display: inline-block; vertical-align: top; height: 48px; line-height: 46px; padding: 0 25px; font-family: inherit; font-size: 15px; color: #bbb; text-align: center; text-decoration: none; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7); background-color: #303030; background-clip: padding-box; border: 1px solid; border-color: #202020 #1a1a1a #111; border-radius: 25px; background-image: -webkit-linear-gradient(top, #3d3d3d, #272727); background-image: -moz-linear-gradient(top, #3d3d3d, #272727); background-image: -o-linear-gradient(top, #3d3d3d, #272727); background-image: linear-gradient(to bottom, #3d3d3d, #272727); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3); } .button:hover { background-color: #363636; background-image: -webkit-linear-gradient(top, #404040, #2a2a2a); background-image: -moz-linear-gradient(top, #404040, #2a2a2a); background-image: -o-linear-gradient(top, #404040, #2a2a2a); background-image: linear-gradient(to bottom, #404040, #2a2a2a); } .button:active, .button.active { line-height: 48px; color: #ccc; background-color: #b42f32; border-color: #1c1c1c #202020 #222; background-image: -webkit-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: -moz-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: -o-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: linear-gradient(to bottom, #a3161a, #b63335 60%, #bf4749); -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09); } .button-check { position: relative; width: 48px; padding: 0; font: 0/0 serif; text-shadow: none; color: transparent; } .button-check:before { content: ''; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -10px; height: 5px; width: 16px; border: solid #bbb; border-width: 0 0 5px 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); } .button-check:active:before, .button-check.active:before { margin-top: -6px; border-color: #ccc; -webkit-box-shadow: -1px 1px rgba(0, 0, 0, 0.3); box-shadow: -1px 1px rgba(0, 0, 0, 0.3); } /* a.k.a. the Unicode version */ .lt-ie9 .button {line-height: 46px;} .lt-ie9 .button-check:before {content: none;} .lt-ie9 .button-check:after { content: '\2713'; font-size: 24px; font-weight: bold; color: #bbb; }

Dan untuk cara menggunakannya berikut caranya

Edit HTML Dan Masukin Kode dibawah ke HTML
<a class="button" href="http://1.bp.blogspot.com/-bkLWBmyO9VQ/UlZJgA9VWpI/AAAAAAAABxk/WQmS9szqISg/s320/Me+Galaxy.png">Button Download</a>
<a class="button active" href="http://1.bp.blogspot.com/-bkLWBmyO9VQ/UlZJgA9VWpI/AAAAAAAABxk/WQmS9szqISg/s320/Me+Galaxy.png">Button Download</a>
<a class="button button-check" href="http://1.bp.blogspot.com/-bkLWBmyO9VQ/UlZJgA9VWpI/AAAAAAAABxk/WQmS9szqISg/s320/Me+Galaxy.png">OK</a>
<a class="button button-check active" href="http://1.bp.blogspot.com/-bkLWBmyO9VQ/UlZJgA9VWpI/AAAAAAAABxk/WQmS9szqISg/s320/Me+Galaxy.png">OK</a><br />
Keterangan : Ubah Tanda Hendak yang mau didownload

Sumber : Dhf


By : Me Galaxy
Share this article :

Tidak ada komentar:

Poskan Komentar

 
Support : Creating Website | Me Galaxy | Me Goo
Copyright © 2013. Me Galaxy - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger