Bu bağlantıyı bir düğme

Question

gibi görünmesini nasıl sağlayabilirim? Bir düğmeyi nasıl görebiliyorum? Webkit'i denedim ama çalışmıyor gibi görünüyor, yanlış bir şey yapmalıyım. Nasıl göründüğüne dair bir görüntü ekledim ve neye benzemeye çalıştığımı. HTML5 CSS3 ve önyükleme kullanarak. Yardımın takdire değer!

<div class="btn-one"> 
<a href="#h3" class="button">Scroll Down to Learn More</a> 
</div> 

sayfa aşağı ben Düzgün çalışan çapa

koymak ama sadece olması gerektiği gibi görünmüyor.

CSS

a.button { 
text-decoration: none; 
color: #00bfff; 
font-size: 18px; 
text-transform: uppercase; 
letter-spacing: .5px; 
display: inline-block; 
padding: 10px 30px; 
margin: 20px; 
font-weight: 400; 
border-color: #00bfff; 
border-width: 1px; 
-webkit-border-radius: 50%; 
-webkit-border-color:#00bfff; 
-moz-border-radius: 50%; 
-ms-border-radius: 50%; 
-o-border-radius: 50%; 
} 

.btn-one { 
padding: 2%; 
font-weight: 400; 
} 

Answer 1

sorunun öğeye bir sınır tarzı tanımlayan olmaması gibi görünüyor. Sınırı tanımlamanın kestirme sürümünü kullanırsanız (basitlik için), göründüğünü görürsünüz. Aşağıda bazı CSS'leri örnekledim ve sınır yarıçapını değiştirdim,% 50'sinde oval gibi görünüyor ve istediğiniz etkiyi göremedim.

a.button { 
    text-decoration: none; 
    color: #00bfff; 
    font-size: 18px; 
    text-transform: uppercase; 
    letter-spacing: .5px; 
    display: inline-block; 
    padding: 10px 30px; 
    margin: 20px; 
    font-weight: 400; 
    border: 1px solid #00bfff; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    -ms-border-radius: 40px; 
    -o-border-radius: 40px; 
} 

.btn-one { 
    padding: 2%; 
    font-weight: 400; 
} 

Answer 2

Gerek

-webkit-border-radius: 40px; 
-moz-border-radius: 40px; 
-ms-border-radius: 40px; 
-o-border-radius: 40px; 

kullanmak Hemen kullanın:

border:#00bfff 1px solid; 
border-radius: 25px; 

Bu daha iyi duruma getirilmiştir kod

a.button { 
 
text-decoration: none; 
 
color: #00bfff; 
 
font-size: 18px; 
 
text-transform: uppercase; 
 
letter-spacing: .5px; 
 
display: inline-block; 
 
padding: 10px 30px; 
 
margin: 20px; 
 
font-weight: 400; 
 
border:#00bfff 1px solid; 
 
border-radius: 25px; 
 

 
} 
 

 
.btn-one { 
 
padding: 2%; 
 
font-weight: 400; 
 
}

<div class="btn-one"> 
 
<a href="#h3" class="button">Scroll Down to Learn More</a> 
 
</div>