Sculpting the excess from a div-generated HTML button

I need help with adjusting the appearance of a link to make it look like a button. Currently, the button looks too "fat" because of the red background around the text. How can I reduce this effect?

I've tried tweaking the width of the div, but that just causes the text to wrap around.

<div style="width: 100px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 10px; padding-bottom: 20px">
     <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px 18px;">
                                    Just do it!
     </a>
 </div>

UPDATE

I want the ratio of text to the red background color to be similar to the button shown in this screenshot .

htmlcss

Answer №1

Everything looks good now, just tweak the padding and width as needed.

<div style="width: 80px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 5px;">
     <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px;">
                                    Just do it!
     </a>
 </div>

Answer №2

Ensure to include a padding bottom of 10px.

<div style="width: 100px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 10px; padding-bottom: 10px">
     <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px 18px;">
                                    Just do it!
     </a>
 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate content inside an anchor tag

Currently, I am in the process of developing a WordPress blog that utilizes the Woo Themes Definition theme. I have encountered an issue where text reading "previous" or "next" appears on the arrows only when using Safari on a Mac machine. You can find mo ...

jqueryhtmlwordpress

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

htmlforms

The positioning in CSS is not functioning as expected in a customized component

https://codesandbox.io/s/71j1omvz66 Struggling to shift the chat component to a new position. Any ideas on how to make it move? ...

cssreactjs

Clearing text fields in jQuery by cloning them

I am attempting to duplicate the friend fields (name + email) when the "add another friend" button is clicked. However, the cloned fields end up including the text inside them, which is not desired! Does anyone have any suggestions or solutions? Here is t ...

jqueryhtmlformsclone

Tips on using Jquery to animate an element to a specific pixel measurement

My expertise lies in executing the following code: $("#nurseView").animate({"left": "+=100px"}, "slow"); However, I am facing a dilemma. How can I animate an object to exactly 1576px on the X-axis regardless of its current position? The code snippet abov ...

javascriptjqueryhtml

What could be causing the movement of my main navigation links when hovering over another top-level element?

I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right: (Take note of the top-level elements being affected ...

htmlcss

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

Is it possible for CSS in React to cause the vanishing of all buttons

I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...

htmlcssreactjs

Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

I would like to create a banner similar to the one shown here: https://i.sstatic.net/SZLr9.png I am attempting to achieve this using 'absolute' or 'fixed' positioning. However, when I tried using 'left: 0 right: 0 top: 0', i ...

cssreactjsmaterial-ui

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx: import React, { Component } from 'react'; class Counter extends Component { ...

javascriptcssreactjsbootstrap-4

What distinguishes the creation of HTML Emails from HTML Email Signatures?

In my opinion, I may be overthinking this but is there a distinction in how HTML Emails and HTML Email Signatures are constructed and displayed? It seems that when I search for HTML Email Signatures, results mainly focus on HTML Emails. Some results do tou ...

htmlcssemailhtml-email

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

I just started learning about redux and I am trying to understand it from the basics. So, I installed an npm package and integrated it into my form. However, when I attempt to dispatch an action, I encounter an error stating that 'dispatch is not defi ...

javascripthtmlreactjsreduxmaterial-ui

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

Padding causing links to break exclusively in Firefox

As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space. The problem seems to be in this piece of code: HTML: <div id="h ...

htmlcssfirefox

Blazor: Passing a CSS class as a parameter to a child component

Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...

cssblazor-webassembly

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

javascripthtmlcss

divs placed next to each other

I'm facing an issue with 4 divs within a parent div. I've used float:left in the style of all 4 divs to display them side by side. Although the divs are appearing next to each other, the height of the parent div is not adjusting to accommodate th ...

csshtml

Safari experiences a decrease in speed when multiple checkbox elements are present

While using Safari, I have encountered a problem. The performance of interacting with a text input is significantly affected when there are numerous type="checkbox" elements on the page. This issue appears to be more pronounced in Safari compared to Chrom ...

htmlperformancedomsafari

Python - Selenium: A guide to locating elements based on color

I have a situation where I need to select only the "Claim" button from the first div, even though both div cases are very similar. Is using background color a good way to identify my element? Or do you have any other ideas? 1. <div class="well well-sm ...

cssselenium