Struggling to create a unique custom button in Twitter Bootstrap 3.
I am trying to design a button with a triangle in the right bottom corner like this: https://i.sstatic.net/IZAv0.jpg
I have considered using the background of the button and adding text, but is there a custom button generator available to achieve this specific style?
Thank you for your help!
If you're looking to create a customized button in Bootstrap, you'll need to define it in your CSS rather than relying on Bootstrap to generate it for you.
Here's an interesting CSS-only solution for creating a stylish button:
<a href="#">Button!</a>
a{
background:#b6174d;
color: white;
font-weight: bold;
padding: 10px 15px;
text-decoration: none;
font-family: Arial;
position:relative
}
a:after{
content: "";
position: absolute;
bottom: 0px;
right: 0px;
border-width: 0px 0px 13px 13px;
border-style: solid;
border-color: #fff transparent;
display: block;
width: 0;
}
a:hover{
background: #e83370;
}
You can also view the button in action on this fiddle: http://jsfiddle.net/9tPcZ/1/
<div style="background: gray; height: 100px; width: 200px; position: relative;">
<div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>
You can also use this Jquery Plugin
Implement a stylish button using CSS :after pseudo class
Check out the live demo here: http://jsfiddle.net/surjithctly/cqT4m/
HTML
<a class="button" href="#">
My Stylish Button
</a>
CSS
.button {
background:#FF0000;
padding:10px 30px;
display:block;
float:left;
position:relative;
color:#FFF;
text-decoration:none;
}
.button:after {
content:"";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent #FFF transparent;
position:absolute;
right:0;
bottom:0;
}
I am currently learning AngularJs and practicing some coding. However, I am facing an issue where the javascript code does not work when I run it on my browser (Chrome/IE). The "{{product.like}}" code is not functioning as expected. Is there any specific d ...
I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...
Is it possible in React Native to override custom styles with dynamically fetched font-size and background color values from a server's JSON data? I am looking to incorporate this JSON data theme into my style themes. Can you provide the syntax for cr ...
I am currently working on a progress bar that displays the percentage of delivery completed. While I have successfully designed the progress bar itself, I am struggling to change the text font color based on the background color of the bar. <div class=& ...
When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...
I have a YouTube video that I'm trying to center within a div. After adding display: block; to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe ...
I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...
I created a jQuery menu that's also available on JSfiddle here: $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible ...
Having trouble centering text in an AppBar? You're not alone. Despite trying various methods like using Typography element, align="center", textAlign="center", and style={{ align: "center" }}, among others: class CustomApp extends React.Component { ...
Is it possible to achieve a design similar to this using CSS, with a Half-background color for a div? ...
Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...
On my webpage, there is a variety of elements such as inputs and anchors. I need to specify which input field the browser should move focus to when I press the tab key while on an input. Currently, pressing tab from one specific input takes me to a menu i ...
When using the CKEditor editor bar inside a green div with another div below it, I noticed that when clicking on "font" or any other option that opens a dropdown menu, it gets hidden behind the bottom div. This issue seems to occur in browsers like Chrome ...
Within my HTML, I have two div elements. The first div is filled with Menu items represented by li elements, while the second div contains submenus. My desired functionality involves displaying the submenu when hovering over a menu item's li element u ...
My goal is to create code that displays various mathematical formulas. The formula I am focusing on right now is for the mean (average) and it currently looks like this: ∑n⁄n: <span class="frac"><sup>∑n</sup><span> ...
I am currently creating a fruit consumption chart for each day, and so far everything is working correctly in the provided example. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "hideCredits": true, "fixedColumnWidth": '10px& ...
Looking for some guidance on using flex as a newbie here. Currently working on designing a website page and struggling with centering a div tag on the page using flex. Appreciate any assistance or advice you can provide. Thank you! ...
Looking to enhance the mobile reading experience with a responsive design similar to popular ebook readers like Kindle or iBooks? Want to break long articles into full-screen sections for easy navigation on small devices? Consider using dynamic HTML to ada ...
I'm currently tackling a challenge involving regex as I work on breaking down shorthand CSS code for the font property. Here is my progress thus far: var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style ...
Applying this particular css: .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/ border:solid 1px #000000; margin: 5px; background-color:#FFFFFF; padding:5px; opacity:0.9;/*For chrome and mozilla*/ ...