I'm struggling with designing a half circle inside a button that is centered inline with the text. Can someone please assist me with this?
On this particular scenario, what would be more suitable - using a button element or styling a div to look like a button? Refer to the image for clarification.
If you want to achieve the desired outcome, simply utilize the :after pseudo elements.
.btn-default {
border: 1px solid #c7c7c7;
padding: 12px 35px;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
position: relative;
background: #fff;
}
.btn-default:after {
content: "";
position: absolute;
width: 10px;
background: #f00;
right: 0;
top: 50%;
transform: translate(0, -50%);
border-top-left-radius: 5px;
z-index: 99;
height: 20px;
border-bottom-left-radius: 5px;
}<button class="btn-default">Demo</button>They're basically rectangles with two rounded corners. This should work.
.sob
{
height: 2.5em;
}
.hl
{
display: inline-block;
width: 8px;
height: 1em;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-right: -7px;
margin-left: 6px;
}
.sob:nth-of-type(1) > .hl
{
background-color: red;
}
.sob:nth-of-type(2) > .hl
{
background-color: orange;
}
.sob:nth-of-type(3) > .hl
{
background-color: green;
}
.sob:nth-of-type(4) > .hl
{
background-color: teal;
}<button class='sob'>High<span class='hl'></span></button>
<button class='sob'>Moderate<span class='hl'></span></button>
<button class='sob'>Low<span class='hl'></span></button>
<button class='sob'>No Risk<span class='hl'></span></button>Visit this link to view my creation which utilizes the after pseudo-element.
.eachDiv{
border: 1px solid #ddd;
display: inline-block; /*you can use whatever you want */
padding: 5px 40px 5px 20px;
position: relative;
}
.redSemiCircle:after{
content: "";
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 0;
height: 20px;
width: 10px;/*adjust as needed*/
background: #f00;
border-radius: 5px 0px 0 5px;
}<div class="eachDiv redSemiCircle">Test</div>To create a circle effect before and after the button, you can set the button to overflow hidden so that only half of the circle is shown.
button{
border: solid #999 1px; border-radius: 5px; background: #fafafa; padding: 5px 20px 5px 10px; position: relative; overflow: hidden;
}
button::before{
content: "";
width: 21px;
height: 21px;
position: absolute;
border-radius: 50px;
top: 1px;
right: -10px;
}
#btn-1::before{
background: #F91B00;
}
#btn-2::before{
background: #FBC001;
}
#btn-3::before{
background: #92D050;
}
#btn-4::before{
background: #29AF4F;
}
<button id="btn-1">High</button>
<button id="btn-2">Moderate</button>
<button id="btn-3">Low</button>
<button id="btn-4">No Risk</button> .btn{
background: #fff;
border: 1px solid #ccc !important;
}
.btn div{
display: inline-block;
width:12px;
height:24px;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
position:absolute;
}
.circle1{
background: red;
}
.circle2{
background: yellow;
}
.circle3{
background: #80ff80;
}
.circle4{
background: #008000;
}
.btnText{
padding-right:10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn"><span class="btnText">High</span><div class="circle1"></div></button>
<button class="btn"><span class="btnText">Moderate</span><div class="circle2"></div></button>
<button class="btn"><span class="btnText">Low</span><div class="circle3"></div></button>
<button class="btn"><span class="btnText">No Risk</span><div class="circle4"></div></button>
</body>
</html>**We can also achieve the same result like this...**
<style>
.btn{
background: #fff;
border: 1px solid #ccc;
}
.btn div{
display: inline-block;
width:12px;
height:24px;
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
position:absolute;
}
.circle1{
background: red;
}
.circle2{
background: yellow;
}
.circle3{
background: #80ff80;
}
.circle4{
background: #008000;
}
.btnText{
padding-right:10px;
}
</style>
<body>
<button class="btn"><span class="btnText">High</span><div class="circle1"></div></button>
<button class="btn"><span class="btnText">Moderate</span><div class="circle2"></div></button>
<button class="btn"><span class="btnText">Low</span><div class="circle3"></div></button>
<button class="btn"><span class="btnText">No Risk</span><div class="circle4"></div></button>
</body>
When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue ...
Is there a way to display a popup message before redirecting to another page when clicking on a button? Here's the scenario: <a href="addorder.php?id=<? echo $row01['id']; ?>" ><button id="myButton" class="btn btn-primary btn ...
I need help finding an OpenCV codec for fourcc that is compatible with cv2.VideoWriter and allows the video to be played back in an HTML file. I've experimented with using 'DIVX' and 'mp4v' through cv2.VideoWriter_fourcc, but they ...
In my form, I have multiple select options. My goal is to insert a value into the database for each user who is selected with a checkbox, based on the options chosen in the select menu (which allows multiple selections). User1: 5,7,8 User2: 6,4 User ...
After successfully creating a component for my project using Angular, I encountered an issue when adding a modal window. Now, nothing appears when serving my app and Angular throws the error "modal is not a known element". HTML Document <modal> < ...
Below is an image attachment showing a navigation bar with list items. The overflow-y property allows scrolling to the right and left, and the desired effect is to make only one side transparent at a time based on the scroll direction. Is it possible to ac ...
Having a form with two buttons and a parameter that takes different values depending on the pressed button, how can I handle this situation? If I use the following code: <form> <input type="hidden" name="method" value="saveXml"/> < ...
Recently, I've ventured into writing jQuery-like functions in Vanilla JS. While my selectors seem to be working fine, I encounter an "is not a function" error when trying to call the append function on an HTML element. var $ = function(){ this.se ...
Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated. Markup <a id="leftbutton" href="#" onclick="showDiv(this.id); return ...
I managed to center 2 divs using the power of flex, and now I want to introduce a third div at the bottom of the page, just like in the image below: https://i.sstatic.net/pQleWm.jpg (I need the first two divs to stay centered based on their parent elemen ...
Is the image proportion relevant to the issue at hand? <style> .img1:hover { background-image: url({%static 'images/img2.gif' %}); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backg ...
I've never experienced this issue before, but no matter how much padding I add to the picture, the edges are still slightly covered up. Here is an example image (notice that it doesn't happen for every icon - the third one has a normal round back ...
Check out this cool website I want to emulate. The site is a single-page design where you can navigate vertically using various methods like keyboard, mouse, scroll, or swipe gestures. There are carousels that allow left and right navigation. Each section ...
I have encountered a perplexing situation with my layout. In the design below, you can see both double-lined and single-lined text. I have set a margin for the single-lined texts to align them properly. However, when it comes to double-lined text, I find m ...
I'm struggling to find a suitable title for this issue. Essentially, I have a box-shaped div that expands into a rectangle and reveals content when clicked. The problem arises when I animate the div's width during expansion. Instead of positioni ...
I want to position the textAngular toolbar at the bottom of the texteditor-div instead of the top. Despite trying various CSS modifications, I haven't been successful in achieving this. JS: var app = angular.module('myApp', ['textAngu ...
function gatherTaskDetails(element) { var info = {}; info.name = $(element).children(".nameHere").text(); info.date = $(element).children(".dateHere").text(); info.class = $(element).children(".classhere").text(); co ...
Can anyone help me figure out how to create a multi-select box with a disabled element? I want the box to have the following options: All ----or---- option 1 option 2 I don't want the "----or----" option to be selectable. Here's the code I&a ...
We recently had a web designer create our html/css, and upon reviewing some code updates, I noticed the following: img elements simply reference the path of the image like this: <img src="/images/pic.png"> However, for css (using the background pr ...
Hello there, as a newcomer to Angular Js, I am interested in using the pageslide-Directive. Below, you will find a sample template that I have shared. Can anyone guide me on how to load content dynamically in that panel? Your suggestions are highly appreci ...