Sponsered link
การใส่ลูกเล่นให้กับปุ่ม เราสามารถทำได้หลายรูปแบบ สำหรับวันนี้เราจะมาสอนการทำให้ปุ่มของเราเปลี่ยนสีได้และสวยขึ้น ดังนี้ค่ะ
โค้ด HTML
<a class="button" href="#">Button</a> <a class="button" href="#">Button</a> <a class="button" href="#">Button</a>
CSS
Sponsered link
Sponsered link
.button { position: relative; display: inline-block; padding: .9em 4em; color: #000; text-align: center; text-decoration: none; outline: none; overflow: hidden; transition: all .5s; } .button::before, .button::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; transition: all .5s; } .button::before { top: 0; left: 0; border-top: 2px solid #2a14f7; border-left: 2px solid #2a14f7; } .button::after { right: 0; bottom: 0; border-right: 2px solid #2a14f7; border-bottom: 2px solid #2a14f7; } .button:hover { background-color: #9bfbc6; color: #000; transition: all .7s; } .button:hover::before, .button:hover::after { width: 0; height: 0; opacity: 0; transition: all .7s; }
Sponsered link