I have a specific vision for the design:
Please follow this link to view the readmore image. I would like it styled with CSS3.
I have a specific vision for the design:
Please follow this link to view the readmore image. I would like it styled with CSS3.
If you want to achieve this effect, follow these steps:
.button{
width:100px;
height:30px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background: -moz-linear-gradient(top, #89ae56 0%, #85a06d 100%);
background: -webkit-linear-gradient(top, #89ae56 0%, #85a06d 100%);
background: linear-gradient(top, #89ae56 0%, #85a06d 100%);
position:relative;
color:#fff;
line-height:30px;
padding-left:10px;
}
.button:after{
content:"+";
position:absolute;
width:20px;
height:20px;
background:#5f5f5f;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
color:#fff;
text-align:center;
right:5px;
top:5px;
line-height:20px;
}<div class="button">
Read More
</div>There are numerous ways to accomplish this. To achieve the desired effect, utilize a SPAN element with a background gradient, rounded corners, white text featuring a text-shadow. A sample code snippet is provided below:
Incorporate the following in your HTML:
<span class="button-span">Read More</span>
And insert the following CSS (the background code can be generated at for a pure-css gradient):
.button-span {
display: block;
padding: 10px 20px;
border-radius: 5px;
color: white;
text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
/* Background gradient */
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 79%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color- stop(79%,#8eb92a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* IE10+ */
background: linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#8eb92a',GradientType=0 ); /* IE6-9 */
}
Experiment with the values to customize the appearance. To include a small + icon, consider using a transparent PNG with the symbol or utilize a symbol from a font library like the one available at (Embedding fonts may be required for this option, but it's manageable)
We trust that these instructions will be beneficial!
I'm having trouble with the dropdown not displaying any items when I click on it. Here is the source code for reference: <div class = "ui centered grid"> <div class = "ten wide column"> <form class = "ui form"> <h4 cl ...
I have been working on implementing a feature that allows users to edit their personal information in a Django project using Django forms. However, after entering new values in the form and hitting enter, the user is redirected back to the main profile pag ...
Seeking help with positioning the logo on the left and navigation items on the right using Bootstrap classes, while maintaining responsiveness. Click here for sample image 1 Check out the navbar layout <!-- Logo --> <a class="nav ...
Check out my source at this link: http://codepen.io/anon/pen/Bvkjx Observe how the content and background images rotate correctly. Now, I'm curious if it's feasible to keep the following content static <p>SOME CONTENT1</p> while ...
Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...
Is there a way to check if the user has chosen an image when clicking the upload button using jQuery? Can I also set restrictions on the resolution of the uploaded image, for example allowing only images with a resolution above 900 x 400? Below is the form ...
One thing I really enjoy is how Emmet can generate HTML using 'CSS-like' strings. However, I prefer not to use their CSS Abbreviations. For example, when I write the following line of CSS: li a| I expect to get a tab when I press 'TAB&apos ...
Recently, I created an HTML table using Bootstrap V5 on my website. .reasonCode-table th, .reasonCode-table td { padding: 8px; border: 2px solid #7a7878; border-radius: 6px; } .reasonCode-table__title { text-align: center; } .rea ...
My application layout can be viewed here: http://jsfiddle.net/rhgyLjvx/ The layout includes a main header (red), sticky section header (dark blue), fixed footer (grey), and fixed left side nav (green). The application should have full scroll bars on both ...
When there are more than two (li) tags, the ul tag should have the class "col_3"; otherwise it should have the class "col_2" For instance: If there are two columns <div class="container"> <ul class="col_2"> <li>One</li> ...
I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...
I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...
I've been working on a blog code that involves nesting a repeater control within a datalist. My challenge is to assign the alt tags of the repeater control images to match the title of the post from the datalist. Unfortunately, this seems impossible ...
I am having trouble generating a barcode in a new window using the barcode generator script. Despite trying to use window.focus(), I can't get the barcode to appear in the new window. Any assistance on how to generate the barcode in a separate window ...
Forgive me for asking what may seem like a simple question. I am currently using the CSS code below to modify the background color of a label when its associated checkbox is checked: #project input[id="button1"]:checked + label {background-color:red;} Is ...
<label><input type="radio">TextdoesntMakeSense</label> This content that is generated dynamically appears to be read-only, or so I believed... label { color:#fff; font-size:0.0001em; } It's interesting on a webpage with a ...
Below is a snippet of my JavaScript code: for (var i in data){ var trans_no = data[i]; var transno = trans_no.transno; var transdate = trans_no.transdate; var dropno = trans_no.drop; var cusname ...
For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...
I am currently attempting to modify the background color of the entire header in antdesign. I believe the file containing the default settings can be found here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less Upo ...
Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...