Make links into buttons with css

This commit is contained in:
Brian Read 2024-11-05 15:08:48 +00:00
parent 031c1414ec
commit 7d7e4f1c5c
2 changed files with 39 additions and 6 deletions

View File

@ -45,3 +45,36 @@ tbody .tabl1 {}
.subh {} .subh {}
.text1 {} .text1 {}
.subm2 {} .subm2 {}
.inline-buttons {
display: flex; /* Use flexbox to arrange items horizontally */
gap: 10px; /* Optional: Add space between buttons */
}
.inline-buttons .link {
/* Additional styling can be added here if needed */
}
.inline-buttons .link {
display: inline-block; /* Keep links as inline-block for button shape */
padding: 7px 14px; /* Adjusted padding to approximate 70% of the original */
margin: 0; /* Remove margin */
background-color: #efefef; /* Light gray background color */
color: black; /* Text color */
text-decoration: none; /* Remove underline */
border: 2px solid #bbb; /* Thin, light gray border */
border-radius: 3px; /* Slightly rounded corners */
font-size: 11.2px; /* Adjusted font size to approximate 70% of the original */
text-align: center; /* Center the text */
cursor: pointer; /* Pointer cursor on hover */ }
/* Hover and active effects for better interaction */
.inline-buttons .link:hover {
background-color: #d9d9d9; /* Darker shade on hover */
}
.inline-buttons .link:active {
background-color: #c0c0c0; /* Even darker shade on click */
}

View File

@ -13,18 +13,18 @@
{ {
'Name': 'List', 'Name': 'List',
'route': 'LIST', 'route': 'LIST',
'ButtonLink2': { 'Link2': {
'Type': 'ButtonLink', 'Type': 'Link',
'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CONFIG_PAGE', 'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CONFIG_PAGE',
'title': 'CONFIG' 'title': 'CONFIG'
}, },
'ButtonLink3': { 'Link3': {
'Type': 'ButtonLink', 'Type': 'Link',
'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CHECK_DOMAINS_PAGE', 'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CHECK_DOMAINS_PAGE',
'title': 'CHECK_ALL_DOMAINS' 'title': 'CHECK_ALL_DOMAINS'
}, },
'ButtonLink4': { 'Link4': {
'Type': 'ButtonLink', 'Type': 'Link',
'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CHECK_ENABLED_DOMAINS_PAGE', 'href': 'letsencrypt?page=0&page_stack=&Next=Next&wherenext=CHECK_ENABLED_DOMAINS_PAGE',
'title': 'CHECK_ENABLED_DOMAINS' 'title': 'CHECK_ENABLED_DOMAINS'
}, },