I've been attempting to recreate the design of this "subscribe to the newsletter button". I'm struggling with achieving the white "inside border or outline" effect. Here is an example of the button
I've been attempting to recreate the design of this "subscribe to the newsletter button". I'm struggling with achieving the white "inside border or outline" effect. Here is an example of the button
Add an inset shadow to enhance your design
button {
background:turquoise;
border:solid turquoise;
padding:5px;
box-shadow:inset 0 0 0 3px white;<button>inside border ?</button>You can get creative by combining borders with both inset and outset shadows http://codepen.io/gcyrillus/pen/yJfjl ;)
To achieve the desired button styling, use a combination of border-radius and box-shadow:
button {
background: darkcyan;
border: 7px solid darkcyan;
color: white;
font-size: 1.5em;
text-transform: uppercase;
padding: 20px 30px;
border-radius: 15px;
box-shadow: inset 0 0 0 2px white;
}<button>Subscribe to newsletter</button>The border rule sets the outer border while border-radius rounds the corners. This also affects the box-shadow, creating the inner white border line.
What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...
Greetings StackOverflow community, I have embarked on creating a document generator within Confluence 6.10.2 (utilizing JQuery 1.7.2) that offers a range of options for the user. Users are able to interact with checkboxes or radio buttons that trigger th ...
rough sketch of my desired design I am trying to center a label on the page. The parent container is set to a width of 100% and the label itself is displayed as a block element with margin set to auto. When I set the width of the label to a smaller value, ...
I'm attempting to create a bootstrap panel slider using my own jQuery code, but it's not functioning as anticipated. My Objective: I have two links for "previous" and "next", and three panels with distinct headings. When the "previous" link is ...
I've been working on a script that retrieves values from another page and organizes them into a table alphabetically by Name, City, and District. The current script is functioning well, but I now want to enhance it by grouping the values by city as we ...
I've been struggling for hours to achieve this layout: Check out the code example here html, body { height: 100%; overflow-y: hidden; overflow-x: hidden; margin: 0px; padding: 0px; } .MyNavbar { height: 30px; background-color: red; } ...
Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...
I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...
Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...
Imagine having a social networking platform where users can post updates and see them appear in real-time on their timeline. The challenge arises when these updates are only visible to the user currently logged in on a specific device. How can we utilize j ...
I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...
After integrating Foundation Forms into my website to create a form, I am facing an issue where the post is not being created. Below is the HTML code snippet: <div style="padding-bottom: 5px; padding-top: 10px;"> <label> <h3><sma ...
Imagine this scenario: I have a button and a large div. When the button is clicked, the code adds a new div inside the larger one. However, the new div is not draggable because I didn't implement the necessary code. I'm also trying to figure out ...
One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...
In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...
In my project, there is a checkbox that determines whether an input box is disabled. The issue arises when I try to disable the input based on the database value. For example, when the value is 0, it should display as disabled false; however, the input rem ...
Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...
Would love to create a web application for real-time debugging similar to "android->developer options->show touch data" or "android->developer options->show CPU usage". Unfortunately, I have not been able to find a suitable method using HTML5 ( ...
Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...
My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...