Hover 動畫
在按鈕內使用四個 span，並搭配 translateY 調整 span 位置，製作出泡泡向上的效果。
Button
Button
.btn {
display: inline-block;
position: relative;
z-index: 1;
min-width: 200px;
background: #FFFFFF;
border: 2px solid goldenrod;
border-radius: 4px;
color: goldenrod;
font-size: 1rem;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.5s;
padding: 10px 20px;
}
.btn span {
position: absolute;
width: 25%;
height: 100%;
background-color: goldenrod;
transform: translateY(150%);
border-radius: 50%;
left: calc((var(--n) - 1) * 25%);
transition: 0.5s;
transition-delay: calc((var(--n) - 1) * 0.1s);
z-index: -1;
}
.btn:hover,
.btn:focus {
color: black;
}
.btn:hover span {
transform: translateY(0) scale(2);
}
.btn span:nth-child(1) {
--n: 1;
}
.btn span:nth-child(2) {
--n: 2;
}
.btn span:nth-child(3) {
--n: 3;
}
.btn span:nth-child(4) {
--n: 4;
}
參考鏈結：https://codepen.io/comehope/pen/eKqZjy
使用 :before 及 :after 偽元素製作邊框，觸發 :hover 時，讓 :after 邊框蓋住 :before 邊框。同時，可透過 translateY 改變 span 的位置，製作出向上的泡泡效果，與前一個按鈕的設計方法相似。
Button
Button
btn
.btn {
position: relative;
z-index: 1;
min-width: 200px;
background-color: transparent;
border: none;
color: #0fe0f5;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: color 0.5s;
padding: 12px 20px;
}
.btn:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
border: 6px solid #0fe0f5;
}
.btn:after {
content: "";
position: absolute;
left: 9px;
top: 9px;
width: 100%;
height: 100%;
z-index: -2;
border: 6px solid #222222;
transition: all 0.3s 0.2s;
}
.btn:hover {
color: #222222;
}
.btn:hover:after {
transition: all 0.3s;
left: 0;
top: 0;
}
.btn .inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.btn .inner .blob {
position: absolute;
top: 6px;
width: 25%;
height: 100%;
background: #0fe0f5;
border-radius: 100%;
transform: translate3d(0, 150%, 0) scale(1.7);
transition: transform 0.45s;
}
.btn .inner .blob:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.btn .inner .blob:nth-child(2) {
left: 30%;
transition-delay: 0.08s;
}
.btn .inner .blob:nth-child(3) {
left: 60%;
transition-delay: 0.16s;
}
.btn .inner .blob:nth-child(4) {
left: 90%;
transition-delay: 0.24s;
}
.btn:hover .inner .blob {
transform: translateZ(0) scale(1.7);
}
參考鏈結：https://codepen.io/suez/pen/aOgMxy
使用 :before 製作左邊粉紅圓點，觸發 :hover 時，讓 :before 寬度變成 100%。
Button
Button
.btn {
position: relative;
color: #111111;
font-size: 1rem;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-decoration: none;
transition: all 0.2s ease;
padding: 12px 20px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 28px;
background: rgba(255, 171, 157, 0.5);
width: 56px;
height: 56px;
transition: all 0.3s ease;
}
.btn span {
position: relative;
z-index: 1;
}
.btn svg {
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #111111;
stroke-width: 2;
transform: translateX(-5px);
transition: all 0.3s ease;
}
.btn:hover:before {
width: 100%;
background: #FFAB9D;
}
.btn:hover svg {
transform: translateX(0);
}
.btn:hover,
.btn:focus {
color: #111111;
}
.btn:active {
color: #111111;
transform: scale(0.96);
}
參考鏈結：https://codepen.io/avstorm/pen/oqKbLq
整體而言，與前一個按鈕的設計方法相似，但額外使用 mix-blend-mode: difference 讓文字顏色與背景色形成強烈對比。
Button
Button
.btn {
position: relative;
min-width: 160px;
background: transparent;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 20px;
}
.btn span {
color: #FFFFFF;
mix-blend-mode: difference;
}
.btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 52px;
height: 100%;
border-radius: 50px;
background: black;
transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn:hover:before {
background: black;
width: 100%;
}
參考鏈結：https://codepen.io/dan10gc/pen/EQbjgP
使用 outline 製作邊框往外淡出的效果，並搭配內陰影讓按鈕更有層次。
Button
Button
.btn,
.btn:focus {
position: relative;
min-width: 200px;
background: transparent;
color: #E1332D;
font-size: 1rem;
text-align: center;
text-transform: uppercase;
text-decoration: none;
box-sizing: inherit;
padding: 10px 20px;
border: 1px solid;
box-shadow: inset 0 0 20px rgba(225, 51, 45, 0);
outline: 1px solid !important;
outline-color: rgba(225, 51, 45, 0.5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
color: #E1332D;
border: 1px solid;
box-shadow: inset 0 0 20px rgba(225, 51, 45, 0.5), 0 0 20px rgba(225, 51, 45, 0.2);
outline: 1px solid !important;
outline-color: rgba(225, 51, 45, 0) !important;
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
參考鏈結：https://codepen.io/davidicus/pen/emgQKJ
Button
Button
Button
Button
.btn {
position: relative;
min-width: 200px;
background: #FFFFFF;
border: 2px solid #3AD2D0;
transform: translate3d(0px, 0%, 0px);
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
transition-delay: 0.6s;
overflow: hidden;
padding: 10px 20px;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.btn:before {
background: #3AD2D0;
border-radius: 50% 50% 0 0;
transform: translateY(100%) scaleY(0.5);
}
.btn:after {
background: #FFFFFF;
border-radius: 0;
transform: translateY(0) scaleY(1);
}
.btn div {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
text-transform: uppercase;
overflow: hidden;
}
.btn span {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
text-align: center;
transition: transform 0.5s ease;
}
.btn span:first-child {
color: #FFFFFF;
transform: translateY(24px);
}
.btn span:last-child {
color: #1E0F21;
transform: translateY(0);
}
.btn:hover {
background: #3AD2D0;
transition: background 0.2s linear;
transition-delay: 0.6s;
color: #FFFFFF;
}
.btn:hover:after {
border-radius: 0 0 50% 50%;
transform: translateY(-100%) scaleY(0.5);
transition-delay: 0;
}
.btn:hover:before {
border-radius: 0;
transform: translateY(0) scaleY(1);
transition-delay: 0;
}
.btn:hover span:first-child {
transform: translateY(0);
}
.btn:hover span:last-child {
transform: translateY(-32px);
}
參考鏈結：https://codepen.io/avstorm/pen/MBmvJQ
使用 :before 偽元素製作區塊，並透過 attr(data-hover) 顯示文字，觸發 :hover 時，讓 :before 與原本的 div 都往右邊移動 100 %。
Button
.btn {
position: relative;
min-width: 200px;
background: #FFFFFF;
border: 2px solid #111111;
overflow: hidden;
}
.btn div,
.btn:before {
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
transition: all .3s ease-in-out;
padding: 10px 20px;
}
.btn:before {
content: attr(data-hover);
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translate(-100%, 0);
}
.btn:hover div {
opacity: 0;
transform: translate(100%, 0)
}
.btn:hover:before {
opacity: 1;
transform: translate(0, 0);
}
參考鏈結：https://codepen.io/madshaakansson/pen/ExZPJX
使用 :before 及 :after 偽元素製作白色及粉紅色背景，觸發 :hover 時，先讓 :before 由左至右拉長，再讓 :after 由右至左拉長。
Button
Button
.btn {
position: relative;
min-width: 200px;
background: #333333;
border: 1px solid #333333;
color: #FFFFFF;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
padding: 10px 20px;
}
.btn span {
position: relative;
z-index: 100;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.btn:before {
transform: translate3d(-100%, 0, 0);
background-color: #FFFFFF;
transition: transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.btn:after {
background-color: #ffd1d8;
transform: translate3d(100%, 0, 0);
transition: transform 300ms 300ms cubic-bezier(0.16, 0.73, 0.58, 0.62);
}
.btn:hover:before {
transform: translate3d(0, 0, 0);
}
.btn:hover:after {
transform: translate3d(0, 0, 0);
}
參考鏈結：https://codepen.io/egrucza/pen/NqVrzq
將 t、h、a、n、k、s 分別使用 span 元素包裹起來，觸發 :hover 時，讓每個文字以不同的速度落下。
T
h
a
n
k
s
T
h
a
n
k
s
.btn {
position: relative;
z-index: 1;
min-width: 200px;
background: #FFFFFF;
color: black !important;
text-align: center;
padding: 12px 20px;
}
.btn span {
display: inline-block;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
opacity: 0;
transform: translate(0, -20px);
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
}
.btn:before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 3.5px;
opacity: 1;
transform: translate(0, 0px);
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
}
.btn:hover:before,
.btn:focus:before {
opacity: 0;
transform: translate(0, 20px);
}
.btn:hover span,
.btn:focus span {
opacity: 1;
transform: translate(0, 0);
}
.btn:hover span:nth-child(1),
.btn:focus span:nth-child(1) {
transition-delay: 0.025s;
}
.btn:hover span:nth-child(2),
.btn:focus span:nth-child(2) {
transition-delay: 0.05s;
}
.btn:hover span:nth-child(3),
.btn:focus span:nth-child(3) {
transition-delay: 0.075s;
}
.btn:hover span:nth-child(4),
.btn:focus span:nth-child(4) {
transition-delay: 0.1s;
}
.btn:hover span:nth-child(5),
.btn:focus span:nth-child(5) {
transition-delay: 0.125s;
}
.btn:hover span:nth-child(6),
.btn:focus span:nth-child(6) {
transition-delay: 0.15s;
}
參考鏈結：https://codepen.io/abadu/pen/YxJgoe
使用 :after 製作紅色展開區塊，並使用 rotate 讓區塊傾斜一些角度。
Button
Button
.btn,
.btn:focus {
position: relative;
z-index: 1;
min-width: 200px;
border: 2px solid #D24D57;
border-radius: 0;
color: #FFFFFF;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
padding: 10px 20px;
}
.btn:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
background: #D24D57;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
.btn:hover {
color: #FFFFFF;
text-shadow: none;
}
.btn:hover:after {
height: 450%;
}
參考鏈結：https://codepen.io/sazzad/pen/yNNNJG
使用 :before 及 :after 分別製作上下兩個白色區塊，並使用 em 元素製作右方中間的白線。
Button
Button
.btn {
position: relative;
z-index: 1;
min-width: 330px;
background-color: #000000;
overflow: hidden;
box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34);
padding: 12px 20px;
text-decoration: none;
}
.btn span {
color: #ffffff;
font-size: 1rem;
font-weight: bold;
text-align: left;
text-decoration: none;
text-transform: uppercase;;
padding-left: 35px;
display: block;
transform: scaleX(0.6);
transform-origin: center left;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.btn em {
position: absolute;
height: 1px;
width: 47%;
right: 23px;
top: 50%;
background: #ffffff;
transform: scaleX(0.25);
transform-origin: center right;
transition: all 0.3s ease;
z-index: 1;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
height: 50%;
width: 0;
background: #ffffff;
transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.btn:before {
top: 0;
left: 0;
right: auto;
}
.btn:after {
bottom: 0;
right: 0;
left: auto;
}
.btn:hover:before {
width: 100%;
right: 0;
left: auto;
}
.btn:hover:after {
width: 100%;
left: 0;
right: auto;
}
.btn:hover span {
color: #000000;
}
.btn:hover em {
background: #000;
transform: scaleX(1);
}
參考鏈結：https://codepen.io/dicson/pen/edoaaY
使用 :after 製作粉紅背景區塊，並使用 translate 及 rotate 先將區塊移動到畫面之外。當觸發 :hover 時，再讓 :after 回到按鈕位置。
Button
Button
.btn,
.btn:focus {
position: relative;
z-index: 0;
min-width: 200px;
border: 2px solid currentColor;
border-radius: 48px;
color: #FF0FF0;
font-size: 1rem;
text-align: center;
text-decoration: none;
overflow: hidden;
transition: 0.2s transform ease-in-out;
will-change: transform;
padding: 10px 20px;
}
.btn:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: #ff0ff0;
border-radius: 3rem;
transform: translate(-100%, 0) rotate(10deg);
transform-origin: top left;
transition: 0.2s transform ease-out;
will-change: transform;
}
.btn:hover:after {
transform: translate(0, 0);
}
.btn:hover {
border: 2px solid transparent;
color: #FFFFFF;
transform: scale(1.05);
will-change: transform;
}
參考鏈結：https://codepen.io/brownerd/pen/wWOOqj
使用 :before 及 :after 製作兩條線，藉由控制線條出現起始點及終點，就能製作很棒的效果了。
Button (From Top)
Button (From Bottom)
Button (From Left)
Button (From Right)
Button (From Center)
Button (From Top)
Button (From Bottom)
Button (From Left)
Button (From Right)
Button (From Center)
.btn,
.btn:focus {
display: block;
position: relative;
z-index: 1;
min-width: 200px;
color: #FFFFFF;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
padding: 10px 20px;
margin: 10px 0px;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
transition: inherit;
z-index: -1;
}
.btn:hover {
color: #333333;
transition-delay: .5s;
}
.btn:hover:before {
transition-delay: 0s;
}
.btn:hover:after {
background: #FFFFFF;
transition-delay: .35s;
}
.btn.from-top:before,
.btn.from-top:after {
left: 0;
height: 0;
width: 100%;
}
.btn.from-top:before {
bottom: 0;
border: 1px solid #FFFFFF;
border-top: 0;
border-bottom: 0;
}
.btn.from-top:after {
top: 0;
height: 0;
}
.btn.from-top:hover:before,
.btn.from-top:hover:after {
height: 100%;
}
.btn.from-bottom:before,
.btn.from-bottom:after {
left: 0;
height: 0;
width: 100%;
}
.btn.from-bottom:before {
top: 0;
border: 1px solid #FFFFFF;
border-top: 0;
border-bottom: 0;
}
.btn.from-bottom:after {
bottom: 0;
height: 0;
}
.btn.from-bottom:hover:before,
.btn.from-bottom:hover:after {
height: 100%;
}
.btn.from-left:before,
.btn.from-left:after {
top: 0;
width: 0;
height: 100%;
}
.btn.from-left:before {
right: 0;
border: 1px solid #FFFFFF;
border-left: 0;
border-right: 0;
}
.btn.from-left:after {
left: 0;
}
.btn.from-left:hover:before,
.btn.from-left:hover:after {
width: 100%;
}
.btn.from-right:before,
.btn.from-right:after {
top: 0;
width: 0;
height: 100%;
}
.btn.from-right:before {
left: 0;
border: 1px solid #FFFFFF;
border-left: 0;
border-right: 0;
}
.btn.from-right:after {
right: 0;
}
.btn.from-right:hover:before,
.btn.from-right:hover:after {
width: 100%;
}
.btn.from-center:before {
top: 0;
left: 50%;
height: 100%;
width: 0;
border: 1px solid #FFFFFF;
border-left: 0;
border-right: 0;
}
.btn.from-center:after {
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #FFFFFF;
}
.btn.from-center:hover:before {
left: 0;
width: 100%;
}
.btn.from-center:hover:after {
top: 0;
height: 100%;
}
參考鏈結：https://codepen.io/perry_nt/pen/eVboze
使用四個 span 元素製作四條線，並讓每兩條線頭尾相連，看起來就好像只有兩條線在移動。
Button
Button
.btn,
.btn:focus,
.btn:hover {
position: relative;
min-width: 200px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
padding: 10px 20px;
}
.btn span:nth-child(1),
.btn span:nth-child(2),
.btn span:nth-child(3),
.btn span:nth-child(4) {
content: "";
display: block;
position: absolute;
background-color: #FFFFFF;
}
.btn span:nth-child(1) {
width: 1px;
left: 0;
bottom: 0;
}
.btn span:nth-child(2) {
height: 1px;
left: 0;
top: 0;
}
.btn span:nth-child(3) {
width: 1px;
right: 0;
top: 0;
}
.btn span:nth-child(4) {
height: 1px;
right: 0;
bottom: 0;
}
.btn:hover {
border: none;
}
.btn:hover span:nth-child(1) {
animation: move1 1500ms infinite ease;
}
.btn:hover span:nth-child(2) {
animation: move2 1500ms infinite ease;
}
.btn:hover span:nth-child(3) {
animation: move3 1500ms infinite ease;
}
.btn:hover span:nth-child(4) {
animation: move4 1500ms infinite ease;
}
@keyframes move1 {
0% { height: 100%; bottom: 0; }
54% { height: 0; bottom: 100%; }
55% { height: 0; bottom: 0; }
100% { height: 100%; bottom: 0; }
}
@keyframes move2 {
0% { width: 0; left: 0; }
50% { width: 100%; left: 0; }
100% { width: 0; left: 100%; }
}
@keyframes move3 {
0% { height: 100%; top: 0; }
54% { height: 0; top: 100%; }
55% { height: 0; top: 0; }
100% { height: 100%; top: 0; }
}
@keyframes move4 {
0% { width: 0; right: 0; }
55% { width: 100%; right: 0; }
100% { width: 0; right: 100%; }
}
參考鏈結：https://codepen.io/egrucza/pen/gbXBQQ
使用 :before 及 :after 製作兩個區塊，並讓兩個區塊重疊放置在按鈕右下角，:before 區塊下方及左方設定 border，而 :after 區塊則是上方及右方設定 border。當觸發 :hover 時，讓兩個區塊依序放大。
Button
Button
.btn,
.btn:focus {
position: relative;
min-width: 200px;
background: none;
border: none;
color: #58afd1;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
box-shadow: inset 0 0 0 4px #58afd1;
transition: color 0.25s 0.0833333333s;
padding: 10px 20px;
}
.btn:before,
.btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
border: 0 solid transparent;
box-sizing: border-box;
}
.btn:before {
border-bottom-width: 4px;
border-left-width: 4px;
}
.btn:after {
border-top-width: 4px;
border-right-width: 4px;
}
.btn:hover {
color: #ffe593;
}
.btn:hover:before,
.btn:hover:after {
border-color: #ffe593;
transition: border-color 0s, width 0.25s, height 0.25s;
width: 100%;
height: 100%;
}
.btn:hover:before {
transition-delay: 0s, 0s, 0.25s;
}
.btn:hover:after {
transition-delay: 0s, 0.25s, 0s;
}
參考鏈結：https://codepen.io/giana/pen/xdXpJB
使用 :before 及 :after 製作兩個背景透明區塊，讓這兩個區塊大於按鈕區塊。當觸發 :hover 時，使用內陰影方式製造兩個區塊的背景，就能呈現出背景顏色由外往內縮的視覺效果。
Button
Button
.btn {
position: relative;
min-width: 200px;
border: 3px solid #d3b7f7;
border-radius: 5px;
background: transparent;
color: #d3b7f7;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: border 0.5s ease-out;
transition-delay: 0.8s;
overflow: hidden;
transition: 0.5s;
padding: 10px 20px;
}
.btn:before,
.btn:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
margin: auto;
content: 'Button';
border-radius: 50%;
display: block;
width: 22em;
height: 22em;
left: -5.5em;
text-align: center;
transition: box-shadow 0.5s ease-out;
transition-delay: 0.75s;
}
.btn:after {
transition-delay: 0.25s;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:hover {
color: #ffffff;
border-color: #8460af;
animation: anim 1.5s ease;
transition: border 0.2s ease;
}
.btn:hover::before {
box-shadow: inset 0 0 0 11em #b657e5;
transition-delay: 0.05s;
}
.btn:hover::after {
box-shadow: inset 0 0 0 11em #8460af;
transition-delay: 0.5s;
}
@keyframes anim {
0% { color: #d3b7f7; }
50% { color: #50514f; }
100% { color: #ffffff; }
}
參考鏈結：https://codepen.io/lichin-lin/pen/KzeLMb
使用 :before 及 :after 分別製作左右黃色與紫色區塊，並搭配 skewX 讓區塊變成平行四邊形。
Button
Button
.btn,
.btn:focus,
.btn:hover {
position: relative;
min-width: 200px;
background: transparent;
color: #333333;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 20px;
}
.btn:after,
.btn:before {
content: "";
position: absolute;
height: 100%;
width: 50%;
transform: skewX(30deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 0;
}
.btn:before {
background-color: #ffff00;
top: -16px;
left: 0px;
}
.btn:after {
background-color: #8a19ff;
top: 16px;
left: 50%;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:hover:before,
.btn:hover:after {
top: 0;
transform: skewx(0deg);
}
.btn:hover:after {
left: 0rem;
}
.btn:hover:before {
left: 50%;
}
參考鏈結：https://codepen.io/dan10gc/pen/LzLwWp
使用多層陰影製作展開效果。
+
+
.btn,
.btn:hover,
.btn:focus {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
width: 80px;
height: 80px;
border-radius: 50%;
border: none;
background: #ed1c5b;
color: #1a1a1a;
font-size: 2rem;
transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);
}
.btn:hover {
transform: rotate(45deg);
box-shadow: 0 0 1px 15px rgba(138, 59, 88, 0.4), 0 0 1px 30px rgba(138, 59, 88, 0.1), 0 0 1px 45px rgba(138, 59, 88, 0.1);
}
參考鏈結：https://codepen.io/magnificode/pen/zGVyQm