Creating a stylish CSS button with split colors that run horizontally

Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
 -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --antd-wave-shadow-color: #1890ff;
    --scroll-bar: 0;
    font-feature-settings: "tnum","tnum";
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    overflow: visible;
    text-transform: none;
    font: 16px/1.4 Sen,sans-serif;
    line-height: 1.5715;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    user-select: none;
    touch-action: manipulation;
    border: 1px solid #d9d9d9;
    outline: 0;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 0 rgba(0,0,0,.045);
    -webkit-appearance: button;
    padding: 6.4px 20px;
    border-radius: 40px;
    width: 230px;
    height: 68px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    background: #5675ff;
    font-family: RobotoBold3;
    position: relative;
    margin-right: 20px;
}
</style>
</head>
<body>

<button class="button">BUY X </button>

</body>
</html>

javascripthtmlcss

Answer №1

Instead of going through complex calculations, it's best to utilize border radius.

If you want a guide, check out this example on Codepen:

https://codepen.io/aSH-unveil/pen/VwXJgaj

The key technique here is using border-radius with overflow hidden for the button:

.button {
  border-radius: 15%;
  overflow: hidden;
}

and make sure to use inner elements within your button like this:

<button class="button">
  <div class='content top'>
    BUY $EVZ
  </div>
  <div class='content bottom'>
    POWERED BY DEPAY.CASH
  </div>
</button>

Check out the final output here:

https://i.stack.imgur.com/m29vM.png

Answer №2

Check out this sample code. Feel free to customize the button style however you like.

button .top{
  background: #5675ff;
  color:white;
  font-size: 20px;
  padding: 5px 20px
}
button .bottom{
  background:#ccc;
  padding: 5px 20px
}
button{
  padding:0;
  border:0;
  border-radius:15px;
  overflow:hidden;
}
<button class="button">
  <div class="top">BUY X</div>
  <div class="bottom">I'm expensive!</div>
</button>

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

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Sample page: http://jsfiddle.net/y2pwqch6/6/ This particular example showcases a CSS selector known as the adjacent sibling selector: .l:hover + .r { color: blue } The issue arises when hovering over any element on the page, causing Internet Explore ...

htmlcssinternet-explorer

The Typescript Decorator is triggered two times

I submitted a bug report regarding Typescript because I suspect there is an issue, although I'm seeking additional insights here as well. This is the scenario. When running the following code: class Person { @IsValueIn(['PETER', ' ...

javascripttypescripttypescript-decorator

Interactive calendar using Php and Javascript/Ajax

Currently, I am working on a PHP calendar and have integrated Javascript/Ajax functionality to enable smooth scrolling between months without the need for page refresh. Interestingly, the calendar displayed as expected before implementing Javascript/Ajax, ...

javascriptphpajax

Explore the power of accessing XML data using JavaScript

Currently, I am dealing with an XML file and attempting to extract data from it. The structure of the XML file is as follows: <doc> <str name="name">Rocky</str> <str name="Last_name">balboa</str> <str name="age ...

javascriptjqueryxmlajax

Implementing interactive elements such as buttons and controls on an HTML5 canvas

I've been working with the three.js 3D engine and I'm wondering how to incorporate UI buttons onto my WebGL canvas. Any ideas on how to achieve this? ...

javascripthtml5-canvaswebglthree.js

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

How can one leverage Node JS to effectively manage events?

Is it considered a best practice to utilize events for communication between functions within ExpressJS? If so, what is the proper way to send arguments along with my emit event? ...

javascriptnode.jsexpress

"Viewed By" aspect of Facebook communities

I'm working on implementing a feature that shows when a post has been seen, similar to Facebook groups, using JS and PHP. I've been able to track the number of times a post has been seen through scrolling actions, but now I want to determine if u ...

javascriptphpmysql

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Passing an array data from parent to child component has brought up some interesting scenarios: parent.component.html: <child-component ... [options]="students" > </child-component> Status I: Setting the array on definition ...

javascriptangulartypescript

What causes the variation in output when utilizing React's setState() function?

I'm puzzled by this Whenever I try this.setState({count: count+1}), it only updates the count once no matter how many times I click But when I attempt this.setState({count: this.setState.count}), every click successfully updates the cou ...

javascriptreactjs

Loading google maps markers dynamically with ajax requests

I'm in the process of plotting around 120 markers on a Google Map by utilizing an ajax populated array containing google.maps.LatLng objects Here is my script <script type ="text/javascript"> $.ajaxSetup({ cache: false }); ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

Encountering module resolution issue following npm-link for the shared component repository

Attempting npm-link for the first time to establish a shared component repository, and encountering an issue. The project seems to be linked correctly based on this message: /Users/tom.allen/Development/main/project/node_modules/@linked/project -> /usr ...

javascriptreactjsnpmwebpackcomponents

Turn off hover effect using solely CSS

This is my first time posting on stackoverflow, so please excuse me if I overlook something obvious. I tried searching for a solution beforehand but couldn't find one that seemed relevant. In the following jsfiddle example, I have a div that acts as ...

csshover

Error caused by the shouldDisableDate prop in MUI DatePicker's functionality

<Controller name="toDate" control={control} defaultValue={null} render={({ field }) => ( <DatePicker format="DD/MM/yyyy" value={field.value} onChange={(e) => { setToDate(e); field.onC ...

javascriptreactjsmaterial-ui

Unable to assign attribute following discovery

Can the attribute of an anchor element that is found using find() be set? I attempted this: $(this).children('a').setAttribute("href","a link"); Although it does locate the anchor element, why am I receiving an error when trying to use setAttr ...

javascriptjqueryhtml

Angular directive compatibility with Mozilla Firefox

I've encountered a strange issue with my directive in Firefox. The directive is designed to limit user input, and it functions correctly in Chrome. However, in Firefox, once the user reaches the input limit, they are unable to delete any characters - ...

javascriptangularjs

Passing Node.js MySQL query results to the next function within an async.waterfall workflow

In my node.js code using express, I have set up a route to request data from a mysql database. My goal is to pass the returned JSON in tabular form to another function to restructure it into a hierarchy type JSON. I have individually tested the script to ...

javascriptmysqlnode.jsexpress

Error message: "Unassigned value in knockout.js"

Here is my code snippet for binding to a textbox: var CategoryViewModel = { categoryModel: ko.observable({ categoryId: ko.observable(), categoryName: ko.observable(), active: ko.observable() }), GetCategoryById: functio ...

javascriptjqueryknockout.jsknockout-mapping-pluginknockout-3.0

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

javascriptcssmeteormouseenterspacebars

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4