Creating a circular border link button: Step-by-step guide

Struggling to create a link that resembles a button with partially rounded edges in a semi-circumference shape? You're not alone

The issue arises when the radius ends up impacting the entire button's diameter, altering its intended appearance

Desiring a button that mirrors this look:

https://i.sstatic.net/wrlib.jpg

Your current result is more like:

a{
   border-radius: 50%;
   padding: 10px;
   background-color: #999;
}

div{
   padding-top: 10px
}
<div>
<a>Some text</a>
</div>

Seeking a dynamic solution where regardless of font size, the button retains a consistent roundness on its sides

htmlcssbootstrap-4rounded-corners

Answer №1

Utilize the em unit, which is based on the font-size (as opposed to using % which is based on the width):

a {
  border-radius: 2em;
  padding: 0.4em 2em;
  background-color: #999;
}

div {
  margin: 30px 0;
}

.s { font-size: 10px; }

.m { font-size: 20px; }

.l { font-size: 40px; }
<div class="s">
  <a>Some text</a>
</div>

<div class="m">
  <a>Some text</a>
</div>

<div class="l">
  <a>Some text</a>
</div>

Answer №2

Check out this rendition of the image: 

  a {
      border-radius: 2em;
      background-color:#FAFAFA;
      color: #562185;
      box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.1);
      padding: 0.5rem 3rem;
    }

    div {
      padding-top: 10px;
    }
  <div>
      <a>Some text</a>
    </div>

Answer №3

Consider using a relative unit such as em.

.rounded-link {
  border-radius: 2em;
  padding: 0.3em;
  background-color: #999;
  display: block;
  margin: 10px;
  text-align: center;
}

.big {
  font-size: 30px;
}

.bigger {
  font-size: 50px;
}
<a class="rounded-link">Some text</a>
<a class="big rounded-link">Some text</a>
<a class="bigger rounded-link">Some text</a>

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

When the menu is unfurled, the image descends gracefully

.nav-btn { display: block; background-color: #000; color: #FFF; font-size: 1.5em; /*text-align: right;*/ /*right: 2%;*/ float: right; cursor: pointer; padding-top: 20px; /*posi ...

htmlcssimage

Creating a stylish button using Bootstrap in an MVC Core HTML Tag Helper

I recently scaffolded a table in MVC and created a view. I would like to customize the Edit button by changing it to a blue Bootstrap button. How can I accomplish this? Existing Code: <td> <a asp-action="Edit" asp-route-id="@ ...

htmlasp.net-mvcasp.net-core-mvcbootstrap-4

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

My portfolio website uses custom page templates for each page. The blog page is not the landing page, but an interior page. I have been able to add a custom hero image to every page template except for the blog page. Currently, I am using the content.php p ...

phphtmlwordpressfullscreenblogs

restore the HTML element to its initial position after being moved

I am utilizing document.getElementById('Droping1').style['-webkit-transform'] = translate(0px,'+Ground+'px)'; in order to relocate an HTML element. How can I return it to its original position for reusability without t ...

javascriptjquerycsshtml

s3 key not found, The specified key does not exist. previewing file from a web link

After utilizing paperclip and s3, I successfully uploaded a word document and now I am seeking the ability to preview it directly from the database using an iframe. https://i.stack.imgur.com/ceCPu.png <iframe src="<%= agreement.document.url(:smal ...

htmlruby-on-railsamazon-web-servicesiframeamazon-s3

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...

javascriptjqueryhtmlcssfirefox

Erase the border around the color selection field

Here's a demonstration: http://jsfiddle.net/WpJRk/ I've incorporated a color picker into my webpage using the new input type "color": <input type="color"> However, I've noticed that there is an unwanted black border within the eleme ...

htmlcssgoogle-chrometwitter-bootstrap

How to center a div vertically in a window

I have a CSS layout that positions a div both horizontally and vertically relative to the window. It works well, but when I scroll down the page, the div stays centered as if the page hadn't moved. width:600px; height:300px; position:absolute; left:5 ...

javascriptcss

Java - Tapestry - The HTML output from the database does not render the <br> tags as line breaks

I am in the process of developing a news system for my web application. As part of this, I have implemented a function in Java that replaces all newline characters ("\n") with HTML line breaks ("< br>"). Consequently, the description column of m ...

javahtmlsqltapestry

javascript implementing number formatting during keyup event

When I try to format a number in an input field on the keyup event, I receive a warning in my browser console that says "The specified value "5,545" cannot be parsed, or is out of range." The value in the input field also gets cleared. How can I solve this ...

javascripthtmljquery

AngularJS Modal Button

After adding a button and writing the necessary code for implementing a modal in AngularJS, I encountered an issue where the modal was not displaying as expected. Below is the HTML code snippet that I used: <body> <div ng-controller="Mod ...

htmlangularjs

Struggling to get the Bootstrap Striped-table feature to work properly within a Vue

I am currently developing a friends component that displays a user's friends based on a response from an API endpoint. To showcase the responses in organized rows, I aim to utilize the bootstrap striped-table class for styling. You can find more inf ...

laraveltwitter-bootstrapvue.jsvuejs2bootstrap-4

Replacing the content of li elements

I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...

htmlcssreactjs

Using jQuery to apply a CSS class to a chosen radio button

How can I dynamically add a CSS class to a radio button based on its selection? $("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]").val(); if (radVal == 'center') { $(" ...

jquerycssradio-button

How to integrate a toggle switch into an Angular datepicker component

Can the toggle switch be placed inside the calendar? I would like to have it positioned at the top of the open calendar so that users can choose to view date details using the toggle switch <form #uploadForm="ngForm" (keydown.enter)="$event.preventDe ...

htmlcssangular

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

HTML Plant with background removed

I have been attempting to create a tree structure similar to the image provided. However, I am encountering difficulty in getting the background stripes to align properly for a specific row. When resizing the browser window, the stripes do not remain fixed ...

htmlcsstreeview

Can the value of a CSS class be obtained even if it is not being used?

I have an application that pulls data from a database and displays it with associated metadata that dictates the display style. Let's simplify it and say the only metadata is the size of the square it should appear in. For example: dataArray : { ...

javascriptjqueryhtmlcss

Issues with HTML rendering text

Having trouble with text display on my website. It seems to vary based on screen resolution, but I can't figure out why. Any insights on what might be causing this issue? Check out the source code here <body> <div id="navwrap"> < ...

htmlcsstextresolution

Expanding Width and Height Using CSS3 Flexbox

Looking to create a fullscreen calendar app using the CSS3 Flex model. While I've managed to fit the calendar nicely horizontally, I'm struggling to find a way for the weeks to stretch equally in height too. Check out this jsFiddle for a visual ...

htmlcssflexbox