는 CSS3

Question

에서이 같은 상자를 만드는 방법이 내가 원하는 방법입니다

이 링크를 확인하고 readmore 이미지를 참조하시기 바랍니다. 저는 css3에서 이렇게 보길 원합니다.

Answer 1

당신은 다음과 같이 수행 할 수 있습니다

.button{ 
 
    width:100px; 
 
    height:30px; 
 
    -moz-border-radius:5px; 
 
    -webkit-border-radius:5px; 
 
    border-radius:5px; 
 
    background: -moz-linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    background: -webkit-linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    background: linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    position:relative; 
 
    color:#fff; 
 
    line-height:30px; 
 
    padding-left:10px; 
 
} 
 
.button:after{ 
 
    content:"+"; 
 
    position:absolute; 
 
    width:20px; 
 
    height:20px; 
 
    background:#5f5f5f; 
 
    -moz-border-radius:20px; 
 
    -webkit-border-radius:20px; 
 
    border-radius:20px; 
 
    color:#fff; 
 
    text-align:center; 
 
    right:5px; 
 
    top:5px; 
 
    line-height:20px; 
 
}

<div class="button"> 
 
    Read More 
 
</div>

Answer 2

달성 방법에는 여러 가지가 있습니다. 하나는 배경 그라디언트, 둥근 모서리, 텍스트 그림자가있는 흰색 텍스트 등 SPAN 요소를 사용해야합니다.

<span class="button-span">Read More</span> 

그리고 당신의 CSS (순수 CSS 구배에 대한 http://www.colorzilla.com/gradient-editor/에서 생성 된 배경 코드)에

: 값으로 주위

.button-span { 

    display: block; 
    padding: 10px 20px; 
    border-radius: 5px; 
    color: white; 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4); 

    /* Background gradient */ 
    background: #bfd255; /* Old browsers */ 
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 79%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color- stop(79%,#8eb92a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* IE10+ */ 
    background: linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd255', endColorstr='#8eb92a',GradientType=0); /* IE6-9 */ 
} 

바이올린, 당신이 원하는 경우 HTML에서

작은 + 아이콘도 그 위에 심볼이있는 투명한 PNG를 사용하거나 다음과 같은 글꼴의 심볼을 사용하십시오. http://fortawesome.github.com/Font-Awesome/ (이 마지막 옵션에 글꼴을 포함하는 방법을 알아야하지만 그렇지 않습니다. 어렵다)

희망이 도움이됩니다.