Hallo teman blogger selamat pagi dan selamat beraktifitas. Di hari ini aku mau membuatkan tutorial yaitu Cara bikin Checkbox Button Dengan Tampilan Yang Keren. Pasti kalian sangat suka dengan tampilan yang satu ini. Maka dari itu aku ingin membuatkan ke pada kalian bagi yang menginginkan nya. Tampilan nya kalian dapat liat tumpuan di bawah ini.
Mungkin pribadi saja kita mulai langkah-langkah nya sebagai berikut.
Cara bikin Checkbox Button Dengan Tampilan Yang Keren
1. Silakan kalian copy code di bawah ini di atas code </style> atau ]]></b:skin> pada template kalian. .button { display: inline-block; height: 50px; line-height: 50px; padding-right: 30px; padding-left: 70px; position: relative; background-color:rgb(41,127,184); color:rgb(255,255,255); text-decoration: none; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow:0px 1px 0px rgba(0,0,0,0.5); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true); -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2); box-shadow:0px 2px 2px rgba(0,0,0,0.2); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)"; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true); } .button span { position: absolute; left: 0; width: 50px; background-color:rgba(0,0,0,0.5); -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid rgba(0,0,0,0.15); } .button:hover span, .button.active span { background-color:rgb(0,102,26); border-right: 1px solid rgba(0,0,0,0.3); } .button:active { margin-top: 2px; margin-bottom: 13px; -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5); -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5); box-shadow:0px 1px 0px rgba(255,255,255,0.5); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)"; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true); } .button.orange { background: #FF7F00; } .button.purple { background: #8e44ad; } .button.turquoise { background: #1abc9c; } .button.red { background: #e74c3c; } 2. Dan untuk code pemanggil nya kalian dapat copy code di bawah ini.
<a href="#" class="button"><span>✓</span>Look I'm a button</a> <a href="#" class="button orange active"><span>✓</span>Look I'm a Active Button</a> <a href="#" class="button purple"><span>✓</span>Look I'm a button</a> <a href="#" class="button turquoise"><span>✓</span>Look I'm a button</a> <a href="#" class="button red"><span>✓</span>Look I'm a button</a> Ok mungkin itu saja yang dapat aku berikan di tutorial hari ini perihal Cara bikin Checkbox Button Dengan Tampilan Yang Keren. Semoga bermanfaat buat teman blogger. Salam blogger.
