Is there a way to make this anchor link appear as a button?

Can someone please help me figure out how to make this element look like a button? I've tried using webkit but it doesn't seem to be working properly. I'm using HTML5, CSS3, and bootstrap. Your assistance would be greatly appreciated!

https://i.sstatic.net/At0dx.png

<div class="btn-one">
<a href="#h3" class="button">Scroll Down to Learn More</a>
</div>

Further down the page, I've added an anchor that functions correctly but does not appear as intended.

CSS

a.button {
text-decoration: none;
color: #00bfff;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .5px;
display: inline-block;
padding: 10px 30px;
margin: 20px;
font-weight: 400;
border-color: #00bfff;
border-width: 1px;
-webkit-border-radius: 50%;
-webkit-border-color:#00bfff;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.btn-one {
padding: 2%;
font-weight: 400;
}

Answer №1

After analyzing your code, it seems that the issue lies in not specifying a border style for your element. By using the shorthand method to define the border, you should be able to see it displaying correctly. I have provided some sample CSS below where I adjusted the border-radius to 40px instead of 50% to achieve the desired effect.

a.button {
    text-decoration: none;
    color: #00bfff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: inline-block;
    padding: 10px 30px;
    margin: 20px;
    font-weight: 400;
    border: 1px solid #00bfff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.btn-one {
    padding: 2%;
    font-weight: 400;
}

Answer №2

Instead of using:

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;

Simply utilize:

border:#00bfff 1px solid;
border-radius: 25px;

This results in more streamlined and optimized code.

a.button {
text-decoration: none;
color: #00bfff;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .5px;
display: inline-block;
padding: 10px 30px;
margin: 20px;
font-weight: 400;
border:#00bfff 1px solid;
border-radius: 25px;

}

.btn-one {
padding: 2%;
font-weight: 400;
}
<div class="btn-one">
<a href="#h3" class="button">Scroll Down to Learn More</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

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

Here is an example of HTML code for a progress meter: <div class="col-md-3" style="margin-left: -20px;"> <div class="progress-pos active" id="progess-1"> <div class="progress-pos-inner"> Login </div> </di ...

Problem with Firefox full screen slider

Welcome to my website where I have created a full-screen slider for you to enjoy. If you'd like to check it out, just click on the website link. The slider functions perfectly on Chrome and IE, but unfortunately on Firefox, it only shows half of the ...

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Struggling to implement a functionality using ng-click to retrieve the data-target attribute of a clicked angular material md-button, in order to display the submenu when a topic is clicked on the sidenav. The navigation structure consists of md-list with ...

Unlimited rotation feature using Twitter Bootstrap

I am currently working with a carousel using Twitter Bootstrap to display 5 items. Here is an example of what I have set up: <div id="carolsel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

Is it possible to style a React component based on the rendering of another component?

I have a component called Search that I want to be displayed differently depending on which page is being rendered. On the homepage, I want it to appear at the bottom of the page, but on all other pages, I want it to be at the top. Currently, my app.js lo ...

Eliminate Bootstrap's styling from HTML characters

The default heavy checkmark (✔) appears as "✔" Bootstrap 4.3 seems to be altering the appearance of the check, causing it to display as a thick-green one, which is not what I prefer -- see example below I want to remove Bootstrap's styli ...

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

In my HTML code, I have a parent div called "allcomments_4" which contains several child divs with unique IDs (oneEntry), each with their own children. My goal is to locate and retrieve the content inside the last child of the parent node (lastComment) and ...

What's the reason my code isn't functioning as expected?

I am currently working on a website script that changes text based on a specific link, but I am facing issues with the code. The script is supposed to pull data from a MySQL database named ftvo and a table named seriesdb using the link format /file.php?s-i ...

The animation came to a halt after a brief period

Here is the code I wrote. When the button is clicked, the 3 containers should start flashing indefinitely, but they stop after a while. I can't figure out why. Any ideas? <!DOCTYPE html> <html> <head> <title></title> & ...

PHP not displaying Bootstrap input validation message set by JS

Currently, I am attempting to implement error messages using .setCustomValidity() and the .invalid-feedback class on an HTML form utilizing Bootstrap 4. Essentially, when the user validates the form, a JavaScript script assesses the inputs and if any erro ...

Tips on configuring a hidden input field to validate a form

I am currently attempting to create a blind input field using PHP that will validate if the input field is empty. If it's not empty, the message set up to be sent will not send. However, I have encountered several issues with the placement and wording ...

Ways to layer div elements in HTML

Hey there! I am currently in the process of learning how to create a simple website. So far, I have successfully created some static web pages and now I am attempting to add a dynamic element with CSS. As part of this effort, I decided to experiment with t ...

Perform a toggle action on the first row when clicking within the current row using Jquery

I've been grappling with the idea of creating a function that can display and hide a comment field when a button is clicked. The challenge here is that there are multiple line items with their own comment boxes. I want to find a way to achieve this wi ...

Is HTML5 data-target used for loading pages?

Currently, I am working with some HTML5 code: <li class="tile google" data-target-activation="click" data-target="loading"> <div> <a href="#">Search Google</a> <h2>Google</h2> </div> </li> Upon ...

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. https://i.sstatic.net/czpto.png Here is the HTML code for the card: <div class="container"> <div class="flex- ...

The :not() selector in CSS3 seems to be ineffective on sibling elements

In my simple design, I have specified that text should appear in red unless it is within a footer element. This style is applied successfully to p tags, a tags, and others. However, for some reason, the styling does not work when I target the footer tag. ...

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

The tags used in XML and HTML are alike in many ways

Is there a way to distinguish between XML tags and HTML tags in a PHP file that contains both types of content? I find that they sometimes get confused. Any help would be appreciated. Thank you! ...

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

What is the best way to customize the appearance of a table using CSS?

I'm attempting to create a table through RAILS that is automatically generated in the default layout. However, I want to customize its appearance using CSS to achieve the desired look. Specifically speaking, from the attached image, I would like the ...