Attempting to apply border radius to a button, yet encountering difficulties in making it work as intended

Creating HTML Class

In the following HTML code, a class is created with an anchor tag inside.

Although CSS is applied to create a button, the border-radius property seems to not be functioning as expected.

.instagram_button a {
  font-weight: 500;
  font-size: 20px;
  line-height: 19px;
  color: white;
  padding: 18px 35px;
  background: black;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid transparent;
  border-image: linear-gradient(to right, #6610f2, #FF6600);
  border-image-slice: 1;
}
<div class="instagram_button">
  <a href="#">more photos</a>
</div>

htmlcssbootstrap-4

Answer №1

While browsing online, I came across this design that caught my eye. What stood out to me is that the border is not just a static image, but rather a range of colors that can be customized to suit your preferences.

After analyzing your border styles, I made some adjustments and added my suggestions below your code. Hopefully, this will provide some helpful insight:

.instagram_button a {
  font-weight: 500;
  font-size: 20px;
  line-height: 19px;
  color: white;
  padding: 18px 35px;
  background: black;
/*   border-radius: 30px; */
  text-decoration: none;
  display: inline-block;
/*   border: 2px solid transparent; */
/*   border-image: linear-gradient(to right, #6610f2, #FF6600); */
/*   border-image-slice: 1; */

  
  border:3px solid #0000;
  border-radius:30px;
  background:
    linear-gradient(black,black) padding-box,
    linear-gradient(blue,red,orange,green) border-box;
}

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

What are the steps to properly centralize a "brief biography"?

I've been struggling to align my short bio on my webpage. I used Bootstrap to create a column layout with a picture and text, but I can't seem to center it properly. Various attempts were made, including using float: left and float: right, as we ...

htmlcsstwitter-bootstrap

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

Ways to eliminate whitespace in React and Bootstrap 5

I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...

cssreactjsbootstrap-5react-bootstrap

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

Tips for making Slider display the next or previous slide when span is clicked

I have implemented a mix of bootstrap 3 and manual coding for my project. While the image thumbnails function correctly when clicked, the span arrows do not navigate to the next or previous images as intended. Below is the code snippet: var maximages ...

javascripthtmlcss

Struggled to Find a Solution for Code Alignment

Is there a tool or software that can align different types of codes with just one click? I've tried using the Code alignment plugin in Notepad++, but it hasn't been effective. For example, when aligning HTML code using tags, I couldn't find ...

javascriptphphtmlcss

Tips for enabling scrolling on mobile devices

Hello there, I'm facing an issue with scrolling on my website when viewed on mobile devices. Even though I have set the div height to 100%, it appears as 'auto' on mobile screens. As a result, when the text exceeds the screen height, it bec ...

cssresponsive-design

Having difficulty finding the close button in a pop-up window while using the Selenium library with Python

While using chromedriver to open the website mentioned below in my extract_data() function, I encountered a problem with dismissing a pop-up message by clicking the 'x' button. Surprisingly, it seems to click the wrong button instead. What' ...

pythonhtmlgoogle-chromeselenium-webdriver

Collapse a previously used item when a new item is opened within Angular

I've managed to create a tree structure for a sideBar Menu using this code, and it's working well. However, what I'm trying to achieve is that when a menu with submenus is expanded and the user clicks on another parent menu, the expanded sub ...

javascriptcssangularbootstrap-4

A guide on how to selectively blur and make the background transparent in jgrowl notifications without affecting the content

After some experimentation, I found that making the jGrowl notification background both transparent and blurry was not possible. When applying blur to the background, the content also became blurry, which is not the desired effect. If you want a transparen ...

phpjqueryhtmlcssjgrowl

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

htmlcsswebkit

Sending array values from a dynamic input field in Angular 4 and processing them accordingly

I am currently exploring options on how to add and delete multiple input fields. When a user submits two or more fields, I want the results to be displayed in an array. This is my HTML form: <form method="post" [formGroup]="formData"> ...

jqueryhtmlangular

Checkboxes within div elements are unresponsive to clicks

As a novice, I am facing a simple issue. When I place an input checkbox inside the #container div, it functions correctly. However, when I try to put them within the #container div > #section div, they fail to work. *, html, body { box-sizing: b ...

htmlcss

Tips on utilizing HTML tags in shiny context to highlight or potentially enlarge the font size for sprintf使

Can anyone help me figure out how to bold or increase the font size for my sprintf in R? I attempted the code below but it didn't work as expected. Instead of bolding the text, the "<strong" tags became part of the label. Any suggestions on how to ...

htmlrshiny

Customizing default SCSS variables in Bootstrap 4 to create a unique design

There was a previous inquiry posted on Customizing bootstrap 4 variables using its own variables?, which did not receive a satisfying answer. Therefore, I am posing the same question again with a more specific example. My goal is to override some of boots ...

npmwebpackbootstrap-4

Changing the Color of a Table Cell with jQuery

I have designed a table cell in the following way <tr> <td id = 'even'>row 8, cell 1</td> <td id = 'odd'>row 8, cell 2</td> </tr> The colors and font sizes are defined using the CSS below #even { ...

jquerycss

What is the best way to create a seamless change from a black to white invert filter?

I'm currently working on a project where I need to change my icons from black to white. After some research, I found that the best way to do this is by using filter: invert(100%). However, when I try to transition it, the change happens abruptly after ...

htmlcss

Controlling MYSQL data is not possible

When I retrieve data from the database, everything is functioning correctly, but the data flow seems uncontrolled. Here is a snippet of my code... <?php session_start(); include 'conn.php'; include '../includes/layouts/header.php'; ...

phphtmlmysqlcss

Sort PHP results by the initial letter of the name in a stylish manner

Hello, I am attempting to organize categories by the first letter and format them using ul and li elements. Here is my code: $Sql = "SELECT *, COUNT(Cup_Id) AS num FROM tabcup INNER JOIN tabcats ON tabcupom.Cat_Id = tabcats.Cat_Id ...

phphtmlmysqlloops