Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Transforming Buttons into Content Boxes
New Posts  All Forums:Forum Nav:

Transforming Buttons into Content Boxes

post #1 of 5
Thread Starter 
I'm looking for the best way to take a shaped button (say a trapezoid), and when clicked on, it transforms into a content box with text, pictures, etc. in the middle of the screen.

I'm suspecting this is likely a javascript deal, but can I create the button shapes with CSS, and let JS handle the rest? Or do I create the buttons with JS?

Is this even possible?

I know I can easily make the button whatever shape I want, and then have a transition or a dialog/content box appear, but I'd like it if I could have the visual of the trapezoid (or square, or triangle, or circle, or whatever) transforming into said "box".
post #2 of 5
Think about how the text or content inside is going to appear. If you want the edges of the trapezoid to expand and change into a content box you're talking some pretty intense custom JS or CSS3 animation. Id probably go with custom JS to make something like that but I don't really see the point when you can just use something lightbox-like in a simple transition(fade in, slide up w/e you want in jquery animations) as you'll have to have the text pop in somehow and you'll likely be fading it in with a custom design. Not to mention it will most likely break on any mobile devices with the animation.
post #3 of 5
Thread Starter 
Quote:
Originally Posted by Cube Rhino View Post

Think about how the text or content inside is going to appear. If you want the edges of the trapezoid to expand and change into a content box you're talking some pretty intense custom JS or CSS3 animation. Id probably go with custom JS to make something like that but I don't really see the point when you can just use something lightbox-like in a simple transition(fade in, slide up w/e you want in jquery animations) as you'll have to have the text pop in somehow and you'll likely be fading it in with a custom design. Not to mention it will most likely break on any mobile devices with the animation.

Very true, I'd figured there'd be a lot of JS or CSS animation involved, but I'm willing to give it a shot even just to see if it's possible.

Regarding mobile platforms, I've planned to do something (either with script, or something along those lines) to have mobile-friendly transitions.

This was for a desktop environment anyway, but it may be a bridge too far and that's okay.
post #4 of 5
Check this out. CSS and JS should be able to do it. JS for the onclick event really. Perhaps there is something like :hover that i dont know about.

https://css-tricks.com/working-with-shapes-in-web-design/

http://codepen.io/team/css-tricks/pen/10c03204463e92a72a6756678e6348d1
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #5 of 5
Thread Starter 
I'm not concerned about a :hover animation at this point; more of an onclick deal.

But I will give that a look!

I realize this is a bit unorthodox, but I was feeling a little creative and wanted to give something like this a try.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Transforming Buttons into Content Boxes