Is it possible to create a square button on my website that still functions like a traditional button?
I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable:
(How can CSS be used to achieve this effect?) Here is what I have attempted so far:
<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue; background-color: lightBlue;}
Here is the solution you're looking for:
.button {
border: 1px solid blue;
background-color: lightBlue;
height:50px;
width:50px;
cursor:pointer;
}
.button:hover {
background-color: blue;
color:white;
}
For example: http://jsfiddle.net/ABC123/
.button{
border: 2px solid #333;
background-color: #ddd;
padding: 6px 16px;
-o-transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-webkit-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
}
.button:hover {
background-color: #ccc;
}
.button:active {
background-color: #999;
}
The important part is having selectors for the :active and :hover states of the button, enabling different styles to be applied.
Further reading: Exploring the user action pseudo-classes :hover, :active, and :focus
Give this a try
.rectangle {
background: #000;
height: 200px;
width: 380px;
border-radius: 20px;
color: #fff;
text-align: center;
}
.hover-button:hover {
background-color: #000;
}
.additional-info {
font-size: 25px;
/* text-shadow: 0 0 10px white; */
/* font-style: oblique; */
font-family: 'Prosto One';
}
.primary-info {
margin-top: 30px;
font-size: 45px;
font-family: 'Prosto One';
/* text-shadow: 0 0 20px white; */
}
center-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.button:click {
background-color: #000;
box-shadow: 0 5px #383838;
transform: translateY(4px);
}
.clickable-button {
box-shadow: 0 9px #383838;
cursor: pointer;
}<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet">
<!-- <div class="triangle-with-shadow"></div> -->
<div class="rectangle clickable-button">
<div class="center-content">
<span class=".primary-info">Initiate Fixing</span><br>
<span class=".additional-info">The Gadget Store</span>
</div>
</div>I am currently using a specific functionality (utilizing AngularJS & Bootstrap libraries).
Code Snippet in HTML:
<a href="#!register" class="btn">Register Now</a>
CSS Styling:
padding: 30px 15px 20px 10px;
text-decoration: underline;
width: 200px !important;
height: 200px !important;
I've been working on creating a simple sidebar and have reached this point in my code. However, I'm struggling to get it to float to the right. It's all a bit confusing for me. If you'd like to take a look at the code, here is a link t ...
My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...
After making some adjustments to Bootstrap using a custom -theme.css file, I successfully altered the appearance of the dropdown menu. By removing the borders from the navbar and wrapping a header around it set to be fixed on top, everything seemed to be w ...
My SVG isn't scaling to 100% width in Safari like it is in IE, Chrome, and Firefox. Despite numerous attempts, I haven't been able to make my SVG stretch across the full width like it does in other browsers. The project is built using React. . ...
In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...
My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...
Is there a way to use an image as the border for my div elements? The key requirement is that the border must be positioned outside the box without affecting its size. It's important to note that all div items have the same width, but varying heights ...
Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly. I tried setting the SVG co ...
Working with Bootstrap 4 Beta in an attempt to create two columns that maintain full height regardless of screen size. The code below functions perfectly, ensuring both columns maintain full height across all devices. However, upon inserting the bootstra ...
Could someone assist me with an issue I'm experiencing when using the container-fluid in Bootstrap? It seems to be leaving some space on the right side of my web page, and as a newcomer to Bootstrap, any help would be greatly appreciated. <link ...
I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...
My website has various sections on the homepage and I want to add an anchor link to the navigation. This will allow users to scroll down to a specific section, like "About Us," when clicking on the appropriate nav link. I also need the anchor link to work ...
My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...
I am facing an issue with CSS while designing my website. I reached out to the plugin developer for help through a ticket submission, but unfortunately, I have not received a response yet. On my homepage at , I have utilized CSS keyframes to create a text ...
Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...
I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...
I have implemented React portals to display a modal popup after the form is submitted. However, I am facing an issue with blurring only the background while showing the modal, similar to what is shown in picture 2. Initially, I tried using document.body.st ...
Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...
As I work on my component, here is the code snippet from my highest parent, App.component: app.component.html <div class="wrapper_flex"> <div style="width:400px; background-color: pink;"></div> <div style=& ...
I am seeking a way to customize the appearance of checked and unchecked checkboxes using images without modifying the HTML structure. I would prefer not to add labels, classes, or IDs to the elements. The provided example only works in Webkit browsers, s ...