Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana cara agar barisan button berada diposisi tengah
Saya mau tanya, gimana caranya agar barisan button dengan kode css posisinya bisa di tengah dan keliatan rapi. Contoh gambar dan kode terlampir. Semoga ada para master di forum ini ada yang bisa membantu.... Thank's
Kode css
.button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Georgia;
font-size:15px;
font-weight:bold;
font-style:italic;
height:100px;
line-height:100px;
width:20%;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}.button1:active {
position:relative;
top:1px;
}
Kode HTML
<a class='button1' href=''>TENTANG KAMI</a>
<a class='button1' href=''>TIPS TRICK</a>
<a class='button1' href=''>INFO PRODUK</a>
<a class='button1' href=''>KARIR</a>
0
3 Jawaban:
Jawaban Terpilih
semua botton di wrap di dalam div
<div class="center">
<a class='button1' href=''>TENTANG KAMI</a>
<a class='button1' href=''>TIPS TRICK</a>
<a class='button1' href=''>INFO PRODUK</a>
<a class='button1' href=''>KARIR</a>
</div>
tambahin di css
.center {
text-align:center;
}
1
<html>
<head>
<style>
.button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Georgia;
font-size:15px;
font-weight:bold;
font-style:italic;
height:100px;
line-height:100px;
width:20%;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}.button1:active {
position:relative;
top:1px;
}
.btn-center {
text-align:center;
}
</style>
</head>
<body>
<div class="btn-center">
<a class='button1' href=''>TENTANG KAMI</a>
<a class='button1' href=''>TIPS TRICK</a>
<a class='button1' href=''>INFO PRODUK</a>
<a class='button1' href=''>KARIR</a>
</div>
</body>
</html>
1
Terima kasih semua.... Masalah sudah terpecahkan
0