Css overlay for focusing on button
C0mpl3x
Is there a way in css to create and overlay with opacity 0.5 And create a class that when applied will somehow affect the overlay so the final result will look something like this? 
What I am looking for a way that the class would affect the overlay.
Rickard Elimää
I don't know how the rest of your page looks like, but you can use a pseudo-element (to get an offset) with box-shadow to punch a hole around an element, simply by adding a class to the element you want to highlight. Needs some fine adjustment, if you got other shapes than rectangles.
div {
box-shadow: 0px 0px 10px 1px lightgrey;
border-radius: 1rem;
padding: 1rem;
}
button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
}
.highlight {
position: relative;
}
.highlight::before {
--white-area: -25px;
content: '';
position: absolute;
left: var(--white-area);
right: var(--white-area);
top: var(--white-area);
bottom: var(--white-area);
box-shadow:
inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5),
0px 0px 0px 9999px rgba(0, 0, 0, 0.3);
pointer-events: none;
border-radius: 2rem;
}<div>
<h3>Don't Have an Account?</h3>
<button class="highlight">Create Your Account</button>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Callback function in a templated function accepting variable argument type using `switch` statement
- Next: ARM template outputs
Related
TOP Ranking
- 1
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 2
pump.io port in URL
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
grouping by column variables and appending a new variable based on condition
- 5
Python Read Directory And Output to CSV
- 6
BigQuery - concatenate ignoring NULL
- 7
Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use
- 8
Remove adjacent duplicates in linked list in C
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
How to keep curl session alive between two php processes?
- 11
Limit number of characters in uitextview
- 12
Unable to use switch toggle for dark mode in material-ui
- 13
In C#, is there a way to create a List directly from an Array without copying?
- 14
Laravel getting value from another table using eloquent
- 15
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 16
MTKView Displaying Wide Gamut P3 Colorspace
- 17
Vector input in shiny R and then use it
- 18
Modify c# Windows Forms control library
- 19
SQL Server : are transaction locking table for other users?
- 20
When I click any button in my view page the form is submitted
- 21
Can you sort columns (horizontally) in Google Sheets?
Comments