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;
<head id="Head1" runat="server"> <title>Title</title> <style> .parallax { /* The image used */ background-image: url(Pictures/BackUS.png); height: 100%; /* Create the parallax scrolling effect */ back ...
I am currently in the process of building my first website and I am experimenting with different fonts available on fontsquirrel. However, I am encountering an issue where I am only able to utilize certain fonts that I have downloaded from the site. One ...
Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...
The image on the screen is not resizing properly. Please refer to the image with the alternate text google-play-badge. Even though the width and height of the image are set to auto, it is still not adjusting automatically. Here are my codes: body { ...
Currently, my approach involves using conditional comments to connect to a CSS file named "IEonly.css" if the Internet Explorer version is not greater than 8. My goal is to modify certain properties in the standard CSS file. Oddly enough, IEonly.css effect ...
As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...
Is it possible to give a striped effect to a div element's border using jQuery? Consider the following code snippet: <style type="text/css"> #panel { padding: 50px text-align: center; background-color: #e5eecc; bord ...
Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...
I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...
After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...
After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...
My goal is to have the blue square fade in on the first button click, then fade out while the red square fades in on the second click. Unfortunately, it seems that my current code is not achieving this effect. I'm open to any suggestions or help on h ...
How can I create a vertical menu bar with submenus on the right side? The first submenu appears correctly, but the second one is narrower than the first. It seems like they have the same code, yet they look different. Below is the HTML code: <div clas ...
When creating a form using Bootstrap, I want to add some text in a color that matches the brand color used for buttons. While I am aware of the text colors like text-primary available in Bootstrap, I prefer to use button colors for my text. I attempted th ...
I often encounter a situation where I need to showcase a series of thumbnails/images that adhere to a specific aspect ratio within a flexible container. My current approach involves using a transparent, relatively positioned image to enforce the correct as ...
Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...
I've been searching for a solution to my simple dropdown issue, but haven't had any luck in the forums. This is the code for the dropdown: <select id ="category_faq"> <option value="1">item1</option> <option value= ...
After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...
I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...
Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...