How can I insert a URL inside of a button?
Hi there, @HUSSAINALI69!
The simplest and easiest way to insert a URL into a button is the following:
<button><a href="link here">I'm a link!</a></button>
7 Likes
Or you could make the button be inside the link to make sure that no matter where you click on the button, it will work. I’m not sure which one is better.
<a href="link here"><button>I'm a link!</button></a>
9 Likes
if the above posts don’t answer your question: please be more specific. What do you expect to happen, and what have you tried? Edit the category (pencil icon next to the title of your post) to match the appropriate language (Python, or HTML/JS?)
6 Likes
I would say yours is way better. I never even thought to do it that way for some reason but yeah that works a lot better
3 Likes
In order to give to links the appearance of buttons, I would use CSS:
a {
border-style: outset;
border-color: ButtonBorder;
color: ButtonText;
background-color: ButtonFace;
}
4 Likes
Or copying the button’s computed styles directly:
<a href="#" style="accent-color: auto; place-content: normal; place-items: flex-start normal; place-self: auto; alignment-baseline: auto; animation-composition: replace; animation: 0s ease 0s 1 normal none running none; app-region: none; appearance: auto; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(240, 240, 240); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 21.3333px; border-block-end: 2px outset rgb(0, 0, 0); border-block-start: 2px outset rgb(0, 0, 0); border-color: rgb(0, 0, 0); border-radius: 0px; border-style: outset; border-width: 2px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 2px outset rgb(0, 0, 0); border-inline-start: 2px outset rgb(0, 0, 0); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-color: rgb(0, 0, 0); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(0, 0, 0); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(0, 0, 0); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; cursor: default; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline-block; dominant-baseline: auto; empty-cells: show; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 13.3333px; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: auto-flow auto / none; grid-area: auto / auto / auto / auto; height: 21.3333px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 80.4792px; inset-block: auto; inset-inline: auto; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: normal; list-style: outside none disc; margin-block: 0px; margin: 0px; margin-inline: 0px; marker: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: none; max-width: none; min-block-size: 0px; min-height: 0px; min-inline-size: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: none 0px auto 0deg; opacity: 1; order: 0; orphans: 2; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-clip-margin: 0px; overflow-wrap: normal; overflow: visible; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 1px; padding: 1px 6px; padding-inline: 6px; paint-order: normal; perspective: none; perspective-origin: 40.2396px 10.6667px; pointer-events: auto; position: static; r: 0px; resize: none; rotate: none; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-timeline: none; scrollbar-gutter: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: center; text-align-last: auto; text-anchor: start; text-decoration: none solid rgb(0, 0, 0); text-decoration-skip-ink: auto; text-emphasis: none rgb(0, 0, 0); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: auto; text-transform: none; text-underline-position: auto; white-space: normal; touch-action: auto; transform: none; transform-origin: 40.2396px 10.6667px; transform-style: flat; transition: all 0s ease 0s; translate: none; unicode-bidi: normal; user-select: auto; vector-effect: none; vertical-align: baseline; view-timeline: none; view-timeline-inset: 0px; view-transition-name: none; visibility: visible; widows: 2; width: 80.4792px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-line-break: auto; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(0, 0, 0); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;">Hello there</a>
1 Like