I'm struggling with CSS styling and trying to achieve a specific look for a div, as shown in the picture. Can someone provide guidance on how to achieve this style or share the necessary CSS code? I have come across similar buttons and div designs but haven't been able to find the exact CSS for this particular style.
.button{
border-radius:25%/100%;
border:1px solid #000;
background:#fff;
padding: 8px 15px;
font-size:14px;
}
.button span{
font-size:10px;
padding-left:5px;
}<button class="button">sometext
<span>X<span>
</button>.anotherbutton{
background-color: blue;
border: none;
border-radius: 10px;
width: 30%;
height: 40px;
color: black;
}
give this css a shot!
Here is an example of how it can be done:
.customDiv
{
border: solid 2px #000;
border-radius: 25px;
width: 20%;
height: 35px;
color: black;
text-align: center;
}<div class="customDiv">
Text Goes Here
</div>For the solution in its entirety, please refer to: (https://jsbin.com/jigupenihi/edit?html,css,output)
.rounded-btn{
background : #fff;
padding: 20px 40px;
display:inline-block;
border: 3px solid #000;
min-width: 150px;
border-radius: 100px;
text-transform: uppercase;
text-align: left;
font-family: verdana;
font-weight: bolder;
cursor: pointer;
}
.close{
float: right;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Button</title>
</head>
<body>
<br>
<div class="rounded-btn">SOME TEXT <span class="close">X</span> </div>
</body>
</html>.custom-button{
border-radius:25%/100%;
border:1px solid #000;
background:#fff;
padding: 8px 15px;
font-size:14px;
}
.custom-button span{
font-size:10px;
padding-left:5px;
}<button class="custom-button">sometext
<span>X<span>
</button>.rounded-btn{
background : #fff;
padding: 20px 40px;
display:inline-block;
border: 3px solid #000;
min-width: 150px;
border-radius: 100px;
text-transform: uppercase;
text-align: left;
font-family: verdana;
font-weight: bolder;
cursor: pointer;
}
.close{
float: right;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom Button</title>
</head>
<body>
<br>
<div class="rounded-btn">SOME TEXT <span class="close">X</span> </div>
</body>
</html>I am facing an issue with implementing an ajax commenting system on my website. When I place all the code from the /comment directory directly in the root, everything works fine and the commenting system functions as expected on new pages. However, when I ...
During the debugging process of my application with the 'Profiles' feature in DevTools, I noticed an accumulation of "Detached DOM tree's". These detached nodes contain a retaining tree primarily made up of checkContext functions (which orig ...
I have a flirty plugin installed on my website and it's working great except for one thing: I'd like the month category to be filtered in chronological order instead of alphabetically. Is there a way to achieve this? In simpler terms, how can I ...
It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...
I added a basic loading div to my website that fades out once the entire page has finished loading. The code I used is simple: $(window).load(function(){ $('#loading').fadeOut(500); }); While this works well on all desktop browsers and Chro ...
Currently, I am exploring the most effective way to pass data between two pages (Page A to Page B) using PHP for a specific scenario: Page A: This page displays a gallery of images with titles. The PHP file makes a database call to an images table, which ...
I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...
I'm attempting to implement some AJAX rendering when the form is submitted, but for some reason it's not functioning correctly. Upon submitting the form, I am redirected to the submit page. Here is my JavaScript code: $('#knappen').cl ...
I am attempting to create a header with h2 text on the left and h4 on the right, positioned on the same line with equal height and some padding. Here is the code snippet I have written: .alignleft { float: left; } .alignright { float: right; } .nav ...
Is there a way to add "atomic" block content into CKEditor? For instance, I would like to add <h1>Test</h1> right after the letter "B" in the sentence <p>A B C</p>. Currently, when using CKEDITOR.currentInstance.insertHtml('&l ...
As I prepare to create a Shopify storefront for the first time, I have a few inquiries. I have noticed how convenient it is to design both a mobile and desktop view using Material UI, but I have come across conflicting information online. Some sources su ...
Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom. ...
A software application was designed with the following features: It can create 4 balls on the screen, each containing a numerical value Users have the ability to input values for new circles to be generated Upon clicking a button, 4 new circles with num ...
Trying to create a functional hamburger menu but facing some difficulty in getting it right. Here's the concept: The page layout on larger screens should resemble this: https://i.sstatic.net/CBqMP.png Smaller screens will display a hamburger menu, ...
After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly fil ...
Is there a way to get rid of the unsightly double arrow in the select element? I have tried various solutions I found online, but none seem to be effective. <div class="form-group"> <label for="date">Date</label> <d ...
My objective is to have the following code run automatically without the need for user input. It should also execute in a loop instead of running through the sequence only once. I attempted to modify the code, but it either failed to work or altered the sh ...
Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...
Although I haven't delved into HTML extensively, I might not be entirely correct in what I'm about to discuss. As I was working on my Selenium code, I observed that certain buttons on specific webpages don't redirect to other pages but rath ...
Encountering an error while loading the app, specifically related to the URL in the form's action attribute. After hours of searching online and trying various solutions, I am still unable to resolve it. As a newcomer to Django, any assistance would b ...