New
Open/Save
Download
View Source
Packages
PHP Bundle
Save 60%+
All our PHP scripts
PHP
Innovative PHP packages
Python
Advanced Python packages
Node.js
Advanced Node.js packages
Back to Snippets
HTML Styling Links Example
This example will show you how to style HTML links with CSS.
#a
/
HTML
*
CSS
()
JS
Output
Live Updates
.links { display: inline-flex; flex-direction:column; gap: 20px; padding: 20px; } .style1 { display: inline-block; padding: 12px 24px; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #e9ecef; color: #212529; font-weight: 600; font-size: 1rem; border-radius: 8px; border: 1px solid transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; cursor: pointer; text-transform: none; } .style1:hover { background-color: #dee2e6; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); } .style1:active { background-color: #ced4da; transform: translateY(0px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .style1:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } .style2 { display: inline-block; padding: 14px 28px; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); color: #ffffff; font-weight: 600; font-size: 1.05rem; border-radius: 30px; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.5s ease; background-size: 150% auto; background-position: 0% 0%; cursor: pointer; text-align: center; } .style2:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2); background-position: 100% 0%; } .style2:active { transform: translateY(0px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); background-position: 50% 0%; } .style2:focus-visible { outline: 2px solid #80bdff; outline-offset: 2px; } .style3 { display: inline-block; padding: 12px 25px; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #e74c3c; color: #ffffff; font-weight: 500; font-size: 1rem; border-radius: 6px; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .style3:hover { background-color: #c0392b; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .style3:active { background-color: #a93226; transform: translateY(0px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .style3:focus-visible { outline: 2px solid #f1948a; outline-offset: 2px; }
<div class="links"> <a href="#" class="style1">Link 1</a> <a href="#" class="style2">Link 2</a> <a href="#" class="style3">Link 3</a> </div>