CSS3按钮

BUY NOW BUY NOW BUY NOW BUY NOW BUY NOW BUY NOW DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD DOWNLOAD SIGN UP SIGN UP SIGN UP SIGN UP SIGN UP SIGN UP LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE GO BACK GO BACK GO BACK GO BACK GO BACK GO BACK

HTML 代码
<button type="button" class="button ml-25 mr-25 mt-30 gray">BUY NOW</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black">BUY NOW</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red">BUY NOW</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow">BUY NOW</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green">BUY NOW</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue">BUY NOW</button>  

<button type="button" class="button ml-25 mr-25 mt-30 gray round">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black round">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red round">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow round">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green round">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue round">DOWNLOAD</button>  

<button type="button" class="button ml-25 mr-25 mt-30 gray side">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black side">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red side">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow side">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green side">DOWNLOAD</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue side">DOWNLOAD</button>  

<button type="button" class="button ml-25 mr-25 mt-30 gray tags">SIGN UP</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black tags">SIGN UP</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red tags">SIGN UP</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow tags">SIGN UP</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green tags">SIGN UP</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue tags">SIGN UP</button>  

<button type="button" class="button ml-25 mr-25 mt-30 gray rarrow">LEARN MORE</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black rarrow">LEARN MORE</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red rarrow">LEARN MORE</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow rarrow">LEARN MORE</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green rarrow">LEARN MORE</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue rarrow">LEARN MORE</button>  

<button type="button" class="button ml-25 mr-25 mt-30 gray larrow">GO BACK</button>  
<button type="button" class="button ml-25 mr-25 mt-30 black larrow">GO BACK</button>  
<button type="button" class="button ml-25 mr-25 mt-30 red larrow">GO BACK</button>  
<button type="button" class="button ml-25 mr-25 mt-30 yellow larrow">GO BACK</button>  
<button type="button" class="button ml-25 mr-25 mt-30 green larrow">GO BACK</button>  
<button type="button" class="button ml-25 mr-25 mt-30 blue larrow">GO BACK</button>  
        

弹出搜索条

HTML 代码
<input class="search_from" type="text" placeholder="搜索...">
        

阴影效果

css3文字阴影效果

HTML 代码
<span class="text-shadow">css3文字阴影效果</span>
<div class="border pd-5 box-shadow radius-7" style="width:300px; height:50px;" >css3阴影效果</div>