純CSS實現(xiàn)幾個好看的按鈕

老三的休閑書屋 2020-05-16

展開全文

鼠標懸停效果

.button {    background-color: #4CAF50; /* Green */    border: none;    color: white;    padding: 16px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;    cursor: pointer;} .button1 {    background-color: white;     color: black;     border: 2px solid #4CAF50;} .button1:hover {    background-color: #4CAF50;    color: white;} .button2 {    background-color: white;     color: black;     border: 2px solid #008CBA;} .button2:hover {    background-color: #008CBA;    color: white;} <button class='button button1'>Green</button><button class='button button2'>Blue</button>

純CSS實現(xiàn)幾個好看的按鈕

我們可以使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式，使用 transition-duration 屬性可以設置 'hover' 效果的速度。

鼠標懸浮帶陰影按鈕

.button {    background-color: #4CAF50;    border: none;    color: white;    padding: 15px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;}.button1:hover {    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}<button class='button button1'>鼠標懸停后出現(xiàn)陰影</button>

純CSS實現(xiàn)幾個好看的按鈕

添加陰影后，按鈕顯得更加立體。

鼠標懸停后按鈕添加箭頭圖標

.button {  display: inline-block;  border-radius: 4px;  background-color: #f4511e;  border: none;  color: #FFFFFF;  text-align: center;  font-size: 28px;  padding: 20px;  width: 200px;  transition: all 0.5s;  cursor: pointer;  margin: 5px;  vertical-align:middle;}.button span {  cursor: pointer;  display: inline-block;  position: relative;  transition: 0.5s;}.button span:after {  content: '?';  position: absolute;  opacity: 0;  top: 0;  right: -20px;  transition: 0.5s;}.button:hover span {  padding-right: 25px;}.button:hover span:after {  opacity: 1;  right: 0;}<button class='button'><span>Hover </span></button>

純CSS實現(xiàn)幾個好看的按鈕

按鈕點擊的水波效果

.button {    position: relative;    background-color: #4CAF50;    border: none;    font-size: 28px;    color: #FFFFFF;    padding: 20px;    width: 200px;    text-align: center;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;    text-decoration: none;    overflow: hidden;    cursor: pointer;}.button:after {    content: '';    background: #90EE90;    display: block;    position: absolute;    padding-top: 300%;    padding-left: 350%;    margin-left: -20px!important;    margin-top: -120%;    opacity: 0;    transition: all 0.8s}.button:active:after {    padding: 0;    margin: 0;    opacity: 1;    transition: 0s}<button class='button'>Click Me</button>

純CSS實現(xiàn)幾個好看的按鈕

這個gif沒做好

按鈕點擊“往下壓”的效果

.button {  display: inline-block;  padding: 15px 25px;  font-size: 24px;  cursor: pointer;  text-align: center;     text-decoration: none;  outline: none;  color: #fff;  background-color: #4CAF50;  border: none;  border-radius: 15px;  box-shadow: 0 9px #999;}.button:hover {background-color: #3e8e41}.button:active {  background-color: #3e8e41;  box-shadow: 0 5px #666;  transform: translateY(4px);}<button class='button'>Click Me</button>

純CSS實現(xiàn)幾個好看的按鈕