彩色按钮 – 有爱前端

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8">  <title>彩色按钮</title> <style type="text/css"> body { background: #F6F5F3; } div { width: 200px; height: 64px; border-radius: 6px; } .hot { position: absolute; top:25%; left:5%; background:linear-gradient( to top right, rgba(255,87,34,1) 0%, rgba(251,140,0 ,1) 100%); box-shadow: 1px 1px 30px rgba(255,111,0 ,1); } .cloudy { position: absolute; top:25%; left:20%; background:linear-gradient( to top right, rgba(63,81,181,1) 0%, rgba(3,155,229 ,1) 40%); box-shadow: 1px 1px 30px rgba(2,119,189 ,1); } .breezy { position: absolute; top:25%; left:35%; background:linear-gradient( to top right,rgba(156,204,101 ,1) 0%, rgba(38,198,218 ,1) 50%); box-shadow: 1px 1px 30px rgba(38,198,218 ,1);} .night { position: absolute; top:25%; left:50%; background:linear-gradient( to bottom right,rgba(63,81,181,1) 0%, rgba(171,71,188 ,1) 70%); box-shadow: 1px 1px 30px rgba(81,45,168 ,1);} .stormy { position: absolute; top:25%; left:65%; background:linear-gradient( to top right,rgba(117,117,117 ,1) 0%, rgba(33,33,33 ,1) 90%); box-shadow: 1px 1px 30px rgba(33,33,33 ,1); } </style> </head> <body> <div class="hot"></div> <div class="cloudy"></div> <div class="breezy"></div> <div class="night"></div> <div class="stormy"></div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 彩色按钮