Usta CSS cilerden Yardım.

15-03-2019, 12:41:04

Bir puanlama sistemim var.
Puanlama sisteminde 1 den 10 a kadar butonlar var

Bu butonların görünümünü biraz değiştirmek istiyorum.

bendeki görüntü (canlı hali)
ekran görüntüsü - http://prntscr.com/my734i

olmasını istediğim görüntü (canlı hali)
ekran görüntüsü - http://prntscr.com/my73i4

şuanda kullandığım css şu şekilde

.yuvarlak{
   position: relative;
    float: left;
    padding: 5px 8px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50% !important;
    
}
.yuvarlak:hover {background-color: #3482e2;
  color: white;}

Yardımlarınız için şimdiden teşekkürler

15-03-2019, 13:02:39

#2

codeksper

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style type="text/css">
.grid{
width:100%;max-width:800px;margin:40vh auto 0 auto;
display:grid;grid-template-columns:15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px auto 15px;
grid-template-rows:15px auto;
}
.grid .self{}
.grid .self.circle{background:#777;border-radius:50%;transition:300ms background;}
.grid .self.circle:hover{background:#cc0000;}
.grid .self.border{position:relative;}
.grid .self.border:before{content:"";position:absolute;z-index:1;left:0;top:50%;width:100%;height:2px;transform:translate(0,-50%);background:#777;}
.grid .self.number{padding:4px 0 0 0;justify-self:center;color:#777;}
.grid .self.space{}
</style>
</head>
<body>

<div class="grid">
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>
<div class="self border"></div>
<a class="self circle" href="#"></a>

<div class="self number">1</div>
<div class="self space"></div>
<div class="self number">2</div>
<div class="self space"></div>
<div class="self number">3</div>
<div class="self space"></div>
<div class="self number">4</div>
<div class="self space"></div>
<div class="self number">5</div>
<div class="self space"></div>
<div class="self number">6</div>
<div class="self space"></div>
<div class="self number">7</div>
<div class="self space"></div>
<div class="self number">8</div>
<div class="self space"></div>
<div class="self number">9</div>
<div class="self space"></div>
<div class="self number">10</div>
</div>

</body>
</html>

15-03-2019, 15:30:03

#3

U_uR

Çok çok teşekkür ederim hocam bayadır uğraştım yapamamıştım css bilmek bir sanat ellerine sağlık..

uyarlanmış hali : http://prntscr.com/my9nz8

r10 like verdim